JavaScript(JS)网页–动态生成表格

在这里插入图片描述
在网页中，动态生成列表的内容，将数组中的object加入到列表中（没学到数据库）。在HTML中创建thead，然后通过JavaScipt动态生成tbody。并且在每行最后申城一个单元格，加入删除操作，点击删除可以删除此行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成表格</title>
    <style>
        table {
            border-collapse: collapse;
            margin-top: 200px;
            margin-left: 500px;
        }
        table th{
            border: 1px solid black;
            width: 80px;
            height: 40px;
            text-align: center;
            background-color: cornsilk;
        }

        table td{
           
            border: 1px solid black;
            width: 80px;
            height: 40px;
            text-align: center;

        }

    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
         </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>张三</td>
                <td>JavaScript</td>
                <td>100</td>
                <td><a href="JavaScript:;">删除</a></td>
            </tr>
            <tr>
                <td>李四</td>
                <td>JavaScript</td>
                <td>95</td>
                <td><a href="JavaScript:;">删除</a></td>
            </tr>
            <tr>
                <td>王五</td>
                <td>JavaScript</td>
                <td>98</td>
                <td><a href="JavaScript:;">删除</a></td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>JavaScript</td>
                <td>91</td>
                <td><a href="JavaScript:;">删除</a></td>
            </tr> -->
        </tbody>
    </table>
    <script>

        //加入数据
        var datas = [
            {
                name:'张三',
                subject:'JavaScript',
                score:'100'
            },
            {
                name:'李四',
                subject:'JavaScript',
                score:'95'
            },
            {
                name:'王五',
                subject:'JavaScript',
                score:'98'
            },
            {
                name:'赵六',
                subject:'JavaScript',
                score:'92'
            }
        ];
        //创建行，有几个人就创建几行
        var tbody =document.querySelector('tbody')
        for(var i = 0 ; i < datas.length ; i++){
            //创建行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //创建单元格
            for (var k in datas[i] ){
                var td = document.createElement("td");
                td.innerText = datas[i][k];
                tr.appendChild(td);
            }
            //创建删除单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="JavaScript:;">删除</a>';
            tr.appendChild(td);
        }
        var as = document.querySelectorAll('a');
        for (var i = 0 ; i <as.length ; i++){
            as[i].onclick = function(){
                //点击a 删除当前行
                tbody.removeChild(this.parentNode.parentNode);
            }
        }

        // for (var k in Obj){
        //      k 得到的是属性名
        //      dbj[k] 得到的是属性值
        // }
    </script>
</body>
</html>