动态生成表格

ban__

于 2021-11-30 21:19:27 发布

阅读量255

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/ban__/article/details/121643049

版权

实现效果
实现代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成表格</title>
</head>
<style>
    table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
    }

    td,
    th {
        border: 1px solid #333;
    }

    thead tr {
        height: 40px;
        background-color: #ccc;
    }
</style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var datas = [{
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }];
        // 1.事件源：
        var tbody = document.querySelector('tbody');
        // 3.需要创建多个tr行.循环
        for (var i = 0; i < datas.length; i++) {
            // 2.创建tr-行
            var tr = document.createElement('tr');
            // 4.将tr添加tbody的子元素
            tbody.appendChild(tr);
            // 7.每个单元行中又有多个单元格，因为没办法直接获取到对象属性的个数，因此使用遍历对象属性
            for (var k in datas[i]) {
                // 5.在单元行中创建单元格
                var td = document.createElement('td');
                // 8.把对象里面的属性值放到单元格里面，已知for（var k in obj),k是属性名，obj[k]是属性值，在这个案例中，对象是datas[i]，因此datas[i][k]获取到的就是属性值。
                td.innerHTML = datas[i][k];
                // 6.将单元格放在单元行内
                tr.appendChild(td);
            }
            // 9.创建有删除两个字的单元格
            var del = document.createElement('td');
            del.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(del)
        }
        // 10.点击删除后行消失
        var a = document.querySelectorAll('a');
        for (var i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>

</html>