动态生成表格数据和删除

1.创建HTML元素

css略

<table cellspacing="0">
            <thead>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </thead>
            <tbody> </tbody>

        </table>
    </div>

2.创建数据和获取HTML元素

此代码数据来源为自己随意创建

 var datas = [{
            name: '艾昂',
            course: 'javascript',
            score: '100'
        }, {
            name: '孔萨库',
            course: 'javascript',
            score: '90'
        }, {
            name: '加丹加',
            course: 'javascript',
            score: '64'
        }, {
            name: '建安费',
            course: 'javascript',
            score: '80'
        }];
        var tbody = document.getElementsByTagName('tbody')
            //获取tbody标签，获取的是伪数组形式

用getElementsByTagName获取的tbody为伪数组形式后序需要索引号应用

3.实现创建单元格和读取数据删除等操作

  for (let i = 0; i < datas.length; i++) {
            //遍历数组
            var tr = document.createElement('tr');
            //为数组创建行标签
            tbody[0].appendChild(tr);
            //将行标签放入tbody
            for (var 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 href="javascript:;">删除</a>';
            //将删除链接写入单元格
            tr.appendChild(td);
            //将单元格添加到行中

        }
        var as = document.getElementsByTagName('a');
        //获取a链接标签
        for (let i = 0; i < as.length; i++) {
            //遍历a标签
            as[i].onclick = function() {
                //创建a点击事件
                tbody[0].removeChild(this.parentNode.parentNode)
                    //实现删除操作

            }


        }

4.效果