JavaScript中动态生成表格

本文介绍: JavaScript中动态生成表格案例，涉及到数组的遍历以及节点的追加和删除

1. 以下这个案例 比较典型：

题目要求：

使用数组把学生数据模拟出来。
动态创建行、单元格。
为单元格填充数据。
提供“删除”链接，可删除所在的行。

效果如下：

html 代码部分如下：

   &lt;table&gt;
        &lt;thead&gt;
            <tr&gt;
                <td&gt;姓名</td&gt;
                <td>科目</td>
                <td>成绩</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody></tbody>
   </table>

js 代码块：

        //定义数组对象保存数据
        let arr = [
            {
                name: 'Tom',
                subject: 'JavaScript',
                score: '100'
            },
            {
                name: 'Jack',
                subject: 'JavaScript',
                score: '91'
            },
            {
                name: 'Tony',
                subject: 'JavaScript',
                score: '99'
            }];
        //获取tbody
        let tbody = document.querySelector('tbody');

        for (let i = 0; i < arr.length; i++) {//遍历数组

            let mytr = document.createElement('tr');//创建行节点
            tbody.appendChild(mytr);//添加行节点
            for (let j in arr[i]) {//for..in 遍历对象，获取其属性值

                let td = document.createElement('td');//创建单元格节点
                td.innerHTML = arr[i][j] // 将属性值添加至td中
                mytr.appendChild(td)//添加单元格节点
            };

            // 创建操作单元格节点
            let td_delete = document.createElement('td');
            td_delete.innerHTML = '<a href="javscript:;">删除</a>'//屏蔽掉a的href跳转功能
            mytr.appendChild(td_delete);//添加至每一行
        };
        //获取所有a标签节点
        let a_arr = document.querySelectorAll('a');
        for (let i = 0; i < a_arr.length; i++) {//遍历所有节点
            a_arr[i].addEventListener('click', function () {
                //通过父节点tbody来删除它的子节点
                tbody.removeChild(this.parentNode.parentNode)
            });
        };
    </script>