动态生成表格

最新推荐文章于 2024-09-30 15:42:36 发布

mewgulfszd！

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量85

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/CLhen/article/details/125525574

版权

<body>
    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>课程</td>
                <td>分数</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var datas = [{
                name: '张三',
                sbj: '语文',
                score: 100
            },
            {
                name: '李四',
                sbj: '数学',
                score: 120
            },
            {
                name: '王五',
                sbj: '英语',
                score: 114
            }
        ]
        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.innerHTML = 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 () {
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
    </script>
</body>