从0到1学JS：写个简单的成绩管理demo

每日一kun：他们试图把你埋了，你要记得你是种子

数据为死数据，表格根据数据动态生成，后期升级可以用java写个数据接口，话不多说，直接上代码。

JS代码
        var datas=[
            {
                name:"张三",
                subject:"javascript",
                socre:100,
            },
            {
                name:"李四",
                subject:"javascript",
                socre:500,
            },
            {
                name:"王五",
                subject:"javascript",
                socre:600,
            },
            {
                name:"赵六",
                subject:"javascript",
                socre:900,
            },
        ]
        var tbody = document.querySelector("tbody")
        // 这个for循环实现动态生成表格里面的行，根据你的死数据里面有多少个对象，生成相应行数
        for(var i =0;i<datas.length;i++){
            var tr = document.createElement("tr")
            tbody.appendChild(tr)
            // 这个for循环实现动态生成表格列，根据对象里面的属性数量
            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)
        }

        // for循环动态注册点击删除事件
        var alist= document.querySelectorAll("a")
        for(var i = 0 ;i<alist.length;i++){
            alist[i].onclick= function(){
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
        
   HTML代码
       <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>科目</td>
                <td>成绩</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
   CSS代码
           table{
            width: 500px;
            margin: 100px auto;
            text-align: center;
            background-color: rgb(204, 204, 201);
        }

结果

坑：双重for循环里面的变量不能同时为一个，如果同时为 i 就会导致程序只显示一行三列。

思考 如果变量冲突，那为什么程序能正常执行第一次循环嵌套？出来了一行三列，那就证明里面那个列可以可以正常生成，外面的行为什么只能生成一行？个人认为是因为里面的for循环改变了i的值，刚开始生成第一行时候i为0，但由于生成列的for如果写成i就会在循环结束时把i变成3。