JS create a dynamic table

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box table {
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <script>
        // 模拟数据
        var datas = [{
            name: 'zs',
            subject: '语文',
            score: 90
        }, {
            name: 'ls',
            subject: '数学',
            score: 80
        }, {
            name: 'ww',
            subject: '英语',
            score: 99
        }, {
            name: 'zl',
            subject: '英语',
            score: 100
        }, {
            name: 'xs',
            subject: '英语',
            score: 60
        }, {
            name: 'dc',
            subject: '英语',
            score: 70
        }];
        // 表头数据
        var headDatas = ['姓名', '科目', '成绩', '操作'];
        // 1 创建table 元素
        var table = document.createElement('table');
        document.getElementById('box').appendChild(table)
        table.border = '1px';
        table.width = '400px';
        // 2 创建表头
        var thead = document.createElement('thead');
        table.appendChild(thead);
        var tr = document.createElement('tr');
        thead.appendChild(tr);
        tr.style.height = '40px';
        tr.style.backgroundColor = 'yellow';
        // 遍历头部数据，创建th
        for (var i = 0; i < headDatas.length; i++) {
            var th = document.createElement('th');
            tr.appendChild(th);
            th.innerText = headDatas[i]

        }
        // 3 创建数据行
        var tbody = document.createElement('tbody');
        table.appendChild(tbody);
        tbody.style.textAlign = 'center';
        for (var i = 0; i < datas.length; i++) {
            var data = datas[i];
            tr = document.createElement('tr')
            tbody.appendChild(tr)
            for (var key in data) {
                var td = document.createElement('td')
                tr.appendChild(td)
                td.innerText = data[key]
            }
            // 生成删除对应的列
            td = document.createElement('td')
            tr.appendChild(td)
                // 删除的超链接
            var link = document.createElement('a')
            td.appendChild(link);
            link.href = 'javascript:;';
            link.innerText = '删除'
            link.onclick = linkDel;
        }

        function linkDel() {
            tbody.removeChild(this.parentNode.parentNode)
            return false;
        }
    </script>
</body>

</html>
JS create a dynamic table

Guess you like
