前端学习笔记-JS-DOM-动态生成表格案例

最新推荐文章于 2024-04-22 16:45:06 发布

Nanami Touko

最新推荐文章于 2024-04-22 16:45:06 发布

阅读量350

点赞数

分类专栏：前端学习-JavaScript DOM BOM

本文链接：https://blog.csdn.net/qq_36434637/article/details/100924472

版权

前端学习-JavaScript DOM BOM 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

动态生成表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
    // 1.先去准备好学生的数据 用一个数组的形式 把学生对象先存储起来
    var dats = [
        {
            name: '七海灯子',
            subject: 'JavaScript',
            score: 100
        },
        {
            name: '小糸侑',
            subject: 'JavaScript',
            score: 88
        },
        {
            name: '蓝原芽衣',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '蓝原柚子',
            subject: 'JavaScript',
            score: 70
        }
    ];
    // 获取元素
    var tbody = document.querySelector('tbody');
    // 遍历数组 有多少个元素 就创建多少行
    for (var i = 0; i < dats.length; i++) {
        // 1.创建表格 行
        var tr = document.createElement('tr');
        // 添加行到表格
        tbody.appendChild(tr);
        // 2.创建表格每一行的 单元格 通过for循环 遍历对象 对象有几个属性 就创建多少个单元格
        for (var k in dats[i]) {
            var td = document.createElement('td');
            // 把学生对象的属性值 存到 单元格中
            td.innerHTML = dats[i][k];
            tr.appendChild(td);
        }
        // 3.添加每一行最后一个 删除 链接
        var td = document.createElement('td');
        td.innerHTML = '<a href="javaScript:;">删除</a>';
        tr.appendChild(td);
    }
    // 4.删除 功能要等所有的单元格都创建好了才生效 因此写在 上面的for循环 外面
    var as = document.querySelectorAll('a');
    // 给每个 a 绑定点击事件
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function () {
            //删除 a 所在的行 node.removeChild(child)
            tbody.removeChild(this.parentNode.parentNode);
        }
    }
</script>
</body>
</html>