JS 动态生成表格

比眉伴天荒 2023-09-27 11:34 69阅读 0赞

案例分析：  
① 因为表格里面的数据都是动态生成的，实际开发的数据都是要保存到数据库里的，我们这里暂且不使用数据库，采取自定义数据的方式完成案例，数据我们以对象的形式存储到一个数组中。  
② 所有的数据都是放到 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 高！`