动态生成表格案例

最新推荐文章于 2022-10-08 15:09:23 发布

素心如月桠

最新推荐文章于 2022-10-08 15:09:23 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/m0_47010003/article/details/116603551

版权

html 同时被 3 个专栏收录

43 篇文章 13 订阅

订阅专栏

vscode

35 篇文章 2 订阅

订阅专栏

JavaScript

34 篇文章 3 订阅

订阅专栏

点击删除链接，删除本行

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            /* 相邻边被合并 */
            /* text-decoration: none; */
            text-align: center;
            position: absolute;

        }
        thead{
            background-color: rgb(35, 35, 136);
        }
        
    </style>
</head>

<body>
    <table border="1">
        <thead>
            <th>姓名</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var dates = [{
            name: '刘雨昕',
            subject: 'JavaScript',
            score: 100
        }, {
            name: 'lyx',
            subject: 'JavaScript',
            score: 99
        }, {
            name: 'liuyuxin',
            subject: 'JavaScript',
            score: 56
        }, {
            name: '昕xin',
            subject: 'JavaScript',
            score: 0
        },];
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < dates.length; i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            for (var k in dates[i]) {
                var td = document.createElement('td');
                tr.appendChild(td);
                td.innerHTML = dates[i][k];
                
            }
            var td_2=document.createElement('td')
            td_2.innerHTML='<a href="javascript:;">删除</a>';
            tr.appendChild(td_2);
        }
        var a_arr=document.querySelectorAll('a');
        for(var i=0;i<a_arr.length;i++){
            a_arr[i].onclick=function(){
                tbody.removeChild(this.parentNode.parentNode);
            }
        }



    </script>
</body>

</html>

素心如月桠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
动态生成表格案例

点击删除链接，删除本行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
复制链接

扫一扫