动态生成表格（JS）

最新推荐文章于 2022-11-17 23:32:19 发布

米咪米

最新推荐文章于 2022-11-17 23:32:19 发布

阅读量197

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52063946/article/details/118807291

版权

JavaScript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

一、核心算法：

1、创建行，添加行 tr

2、在行中，添加列 td （遍历对象）

3、在行的最后添加一列操作列

4、添加删除点击事件

二、实现代码

<!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 {
            width: 400px;
            text-align: center;
            border-collapse: collapse;
            margin: 100px auto;
        }
        
        thead tr {
            background-color: rgb(132, 198, 218);
        }
        
        tbody tr {
            background-color: rgb(221, 221, 221);
        }
        
        th,
        tr {
            height: 40px;
        }
        
        td,
        th {
            border: 1px solid #aaa;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        var datas = [{
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }];

        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            // 添加行 tr
            var tr = document.createElement('tr');
            tbody.appendChild(tr);

            // 添加列 td
            for (const k in datas[i]) { // 遍历对象
                var td = document.createElement('td');
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }

            // 添加 操作列
            var td = document.createElement('td');
            td.innerHTML = "<a a href = 'javascript: ;'>删除</a>";
            tr.appendChild(td);
        }

        // 删除事件
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>

</html>

三、实现效果

点击删除后，会删除对应的行

米咪米

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
动态生成表格（JS）

一、核心算法：1、创建行，添加行 tr2、在行中，添加列 td （遍历对象）3、在行的最后添加一列操作列4、添加删除点击事件二、实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
复制链接

扫一扫