动态生成表格

最新推荐文章于 2025-08-23 02:53:08 发布

原创最新推荐文章于 2025-08-23 02:53:08 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html #前端

javascript 专栏收录该内容

34 篇文章

订阅专栏

题目：动态生成表格

作用：创建学生数据、创建行、创建单元格、单元格填充数据、创建删除表格、添加删除操作

分析：

因为里面的学生数据都是动态的，我们需要 js 动态生成。这里我们模拟数据，自己定义好数据，数据采用对象形式存储
所有数据都放在 tbody 里面，因为行很多，我们需要循环创建多个行
每个行里面有很多单元格，我们继续使用循环创建多个单元格
将数据放进单元格
最后一列单元格是删除，需要再单独创建单元格

效果：

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成表格</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr {
            height: 30px;
            background-color: rgb(212, 237, 255);
        }

        tbody tr {
            height: 30px;
        }

        tbody th {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }

        .bg {
            background-color: rgb(230, 243, 252);
        }
    </style>
</head>

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

    <script>
        //隔行显示
        //获取tbody里面的所有行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        for(var i = 0;i<trs.length;i++) {
            trs[i].onmouseover = function() {
                this.className = 'bg';
            }
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }

        //动态生成表格
        //1、准备好学生数据
        var datas = [{
            name: '魏璎珞',
            subject: 'javascript',
            score: 100
        },{
            name: '弘历',
            subject: 'javascript',
            score: 99
        },{
            name: '傅恒',
            subject: 'javascript',
            score: 98
        },{
            name: '明玉',
            subject: 'javascript',
            score: 100
        }];
        //2、创建行
        var tbody = document.querySelector('tbody');
        for(var i = 0;i<datas.length;i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //3、创建单元格
            for(k in datas[i]) {
                var td = document.createElement('td');
                //4、把对象里的属性值给 td
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            //5、创建有删除两字的单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="#">删除</a>';
            tr.appendChild(td);
        }

        //6、删除操作
        var as = document.querySelectorAll('a');
        for(var i = 0;i<as.length;i++) {
            as[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>

</html>