JavaScript实现动态创建表格

胡志恒@

已于 2023-02-06 19:20:48 修改

阅读量1.7k

点赞数 4

分类专栏： js部分文章标签： javascript 前端 html

于 2023-02-06 19:13:34 首次发布

本文链接：https://blog.csdn.net/weixin_51688356/article/details/128906808

版权

js部分专栏收录该内容

3 篇文章 1 订阅

订阅专栏

使用JavaScript动态创建表格：
效果图：
在这里插入图片描述
源码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box table {
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        // 定义一个对象用来模拟数据
        var datas = [{
            name: '张三',
            subject: '语文',
            score: 135
        }, {
            name: '李四',
            subject: '数学',
            score: 125
        }, {
            name: '王五',
            subject: '英语',
            score: 130
        }, {
            name: '孙二',
            subject: '物理',
            score: 80
        }, {
            name: '张三丰',
            subject: '化学',
            score: 60
        }, {
            name: '王小二',
            subject: '生物',
            score: 80
        }];

        // 表头数据
        var headDatas = ['姓名', '科目', '成绩', '操作'];
        // 获取页面中的box属性
        var box = document.getElementById('box')

        // 1 创建table 元素
        var table = document.createElement('table')

        // 设置table的样式
        table.border = '1px'
        table.width = '600px'

        // 将table放在box后的节点
        box.appendChild(table)

        // 2 创建表头
        var thead = document.createElement('thead')

        // 遍历头部数据
        for (var i = 0; i < headDatas.length; i++) {
            // 创建th
            var th = document.createElement('th')
                // 设置th的样式
            th.style.height = '50px'
            th.style.backgroundColor = 'lightgray'
                // 将 headDatas里面的数据插入th中
            th.innerText = headDatas[i]
                // 将th放在 thead后的节点
            thead.appendChild(th)
        }

        // 将thead放在table后的节点
        table.appendChild(thead)

        // 3 创建数据行
        var tbody = document.createElement('tbody')

        // 遍历数据datas
        for (var i = 0; i < datas.length; i++) {
            // 创建tr
            var tr = document.createElement('tr')

            // 使用for in遍历对象
            for (var k in datas[i]) {
                // console.log(datas[i][k])
                var td = document.createElement('td')
                td.style.height = '30px'
                td.style.textAlign = 'center'
                td.innerText = datas[i][k]
                tr.appendChild(td)
            }
            // 生成删除对应的列
            var deltd = document.createElement('td')
            deltd.style.textAlign = 'center'
            var del = document.createElement('a')
            del.innerText = '删除'
            del.href = 'javascript:;'
            deltd.appendChild(del)
            tr.appendChild(deltd)
            tbody.appendChild(tr)
                // 删除的超链接
            del.onclick = delFn
        }
        table.appendChild(tbody)

        function delFn() {
            // console.log(this.parentNode.parentNode)
            this.parentNode.parentNode.remove()
        }
    </script>
</body>

</html>