JavaScript实现动态创建表格

使用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>
  • 3
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值