生成动态表格

实现功能：把已知的数据，读出来做成表格。

 

<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)

            }

        }