JavaScript中动态生成表格

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

        涉及到dom节点的操作，以及数组和对象的遍历方法

题目要求：

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

效果如下：

 html代码部分如下：

   <table>
        <thead>
            <tr>
                <td>姓名</td>
                <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>

页面输出结果如文章开头效果图

使用操作列单元格删除后得到如下表格