动态生成表格(全程有解释)

HTML代码

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

    </tbody>
</table>

css代码

table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
    }

    td, th {
        border: 1px solid #333333;
    }

    thead tr {
        height: 40px;
        background-color: #ccc;
    }
</style>

js代码

<script>
    let asd = [
        {
            name: "小明",
            sub: "Java",
            score: 100
        },
        {
            name: "小明",
            sub: "Java",
            score: 100
        },
        {
            name: "小明",
            sub: "Java",
            score: 100
        }
    ]
    //往tbody里面创建行,有几个人(通过数组的长度)我们就创建几行
    let tbody = document.querySelector("tbody");
    for (i = 0; i < asd.length; i++) {       //外面的for循环管行tr
                                             //创建tr行
        let tr = document.createElement('tr');
        tbody.appendChild(tr);
        //行里面创建单元格td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 asd[i]
        for (let k in asd[i]) {   //里面的for循环管列td
            //创建单元格
            let td = document.createElement("td");
            //把对象里面的属性值给td asd[I][K]
            td.innerHTML = asd[i][k];
            //把对象里面的属性值给td
            tr.appendChild(td);
        }
        //创建有删除两个字的单元格
        let td = document.createElement('td');
        td.innerHTML = '<a>删除</a>';
        tr.appendChild(td);
    }
    //删除操作开始
    let as = document.querySelectorAll('a');
    for (let i = 0; i < as.length; i++) {
        as[i].onclick = function () {
            //removeChild:删除;parentnode:父节点
            tbody.removeChild(this.parentNode.parentNode);
            //必须找父节点tbody
        }
    }
</script>