2021-10-06

动态生成表格案例

2021-10-06

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table {
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
        }

        td {
            width: 100px;
            border: 2px solid #333;
        }

        thead td {
            height: 50px;
            background-color: cadetblue;
            color: #fff;
            font-size: 20px;
        }

        tr td:nth-child(1) {
            width: 150px;
        }

        tr td:nth-child(2) {
            width: 300px;
        }

        tbody td {
            height: 30px;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>科目</td>
                <td>成绩</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        // 案例分析
        // 因为为动态表格 所以我们的数据都是从 后台获取的 我们先利用对象简单的创建一个数据库
        // 然后在 创建 tr td 添加到 tbody里 数据是动态的 所以我们利用 for 循环来添加 长度为 对象的长度
        // 创建好 结构后 把 对象里的属性 利用 for in 变量对象 添加到 td 单元格内
        // 在添加 最后一个 删除连接 然后获取到 a 的父亲 td 添加点击事件来删除对应的 tr
        var data = [
            {
                name: '肖战',
                kechen: 'javaScript',
                chengj: 100
            },
            {
                name: '阮鹏',
                kechen: 'javaScript',
                chengj: 59
            },
            {
                name: '吴磊',
                kechen: 'javaScript',
                chengj: 98
            },
            {
                name: '胡歌',
                kechen: 'javaScript',
                chengj: 100
            },
            {
                name: '王一博',
                kechen: 'javaScript',
                chengj: 99
            }
        ];
        var tbody = document.querySelector('tbody')
        for (var i = 0; i < data.length; i++) {
            // 创建行 
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 这里循环创建列 这的列也不能写死 得是 对象里面的内容 所以 我们用 for in 来遍历
            for (var k in data[i]) {
                // 创建单元格
                var td = document.createElement('td');
                // 这里因为上面已经创建了 tr 节点所以不需要在获取 tr 了 
                tr.appendChild(td);
                // 这里 data[i][k] , data[i] 数组里的第几个对象 里面的 data[i][k] 属性
                td.innerHTML = data[i][k]
            }
            // 创建最后一个 td 给 td 添加 a 删除连接
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>'
            // 和上面 一样 创建了一个 元素后不需要在获取他
            tr.appendChild(td);
        }
        // 开始删除
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                // 这里删除 的是 a 爸爸的爸爸 也就是 tr 所有得写 this.parentNode.parentNode
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </script>
</body>

</html>
上一篇:VSCode新建Vue项目


下一篇:html