JS 动态生成表格

最新推荐文章于 2024-05-13 01:52:35 发布

栈老师不回家

最新推荐文章于 2024-05-13 01:52:35 发布

阅读量1.2k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_52861684/article/details/127054864

版权

JavaScript 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

案例分析：
① 因为表格里面的数据都是动态生成的，实际开发的数据都是要保存到数据库里的，我们这里暂且不使用数据库，采取自定义数据的方式完成案例，数据我们以对象的形式存储到一个数组中。
② 所有的数据都是放到 tbody 行里面的。
③ 行很多，所以我们需要循环创建多个行，存放多组数据。
④ 每个行里面又有很多单元格，我们还需要继续使用 for 循环创建多个单元格，并且把数据存入里面（双重 for 循环）。
⑤ 最后一列单元格是删除，需要单独创建单元格。

<!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: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        td,th {
            border: 1px solid #333;
        }
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
        tbody tr {
            height: 35px;
        }
    </style>
</head>
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        //1.准备数据
        var datas = [{
                name: '张三',
                subject: 'JavaScript',
                score: 100
            },{
                name: '李四',
                subject: 'JavaScript',
                score: 94
            },{
                name: '王五',
                subject: 'JavaScript',
                score: 98
            }];
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            //2.创建tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //3.创建普通单元格
            for (var k in datas[i]) {
                var td = document.createElement('td');
                //把当前对象里面的属性值给td
                td.innerHTML = datas[i][k]; 
                tr.appendChild(td);
            }
            //4.创建删除单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>'
            tr.appendChild(td);
        } 
        //5.删除操作开始
        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>

这里顺便补充一下三种创建元素的区别：
① document.write 直接将内容写入页面的内容流，也就是说，它是在整个文档流执行完之后，才开始执行代码，导致页面全部重绘，所以我们一般不使用它；
② createElement 创建多个元素时效率稍低一点点，但结构更清晰；
③ innerHTML 可以采取数组的形式拼接，那么它创建多个元素的效率将是最高的（不要拼接字符串，效率很低）。

不同浏览器下，innerHTML 的效率要比 createElement 高！