生成动态表格

实现功能:把已知的数据,读出来做成表格。
 
<table>
        <tr>
            <th>姓名</th>
            <th>学科</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
    </table>
    <script>
        var table = document.querySelector('table');
        var datas = [{
            name: '甄嬛',
            subject: 'JS',
            score: 99
        }, {
            name: '果亲王',
            subject: 'JS',
            score: 89
        }, {
            name: '大魔王',
            subject: 'JS',
            score: 100
        }]
        for (i = 0; i < datas.length; i++) {
            var tr = document.createElement('tr');
            table.appendChild(tr);
            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);
        }
        // 4. 删除操作 开始 
        var as = document.querySelectorAll('a');
        for (i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)
                table.removeChild(this.parentNode.parentNode)
            }
        }
原文地址:https://www.cnblogs.com/rainbowupdate/p/12533020.html