动态生成表格

淡漠爱清凉

于 2022-11-05 19:45:00 发布

阅读量2.1k

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/Mr_115/article/details/127704003

版权

完成动态生成表格，具体要求如下。
1.使用数组把学生数据模拟出来。
2.动态创建行、单元格。
3.为单元格填充数据。
4.提供“删除”链接，可删除所在的行。

样式渲染

<style>
    a {
        text-decoration: none;
    }

    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>

操作内容

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>果实</th>
                <th>悬赏金</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script>

        //创建数组数据
        var arr = [
            {
                name: '路飞',
                subject: '橡胶果实',
                score: '15亿贝利',
            },
            {
                name: '罗宾',
                subject: '花花果实',
                score: '1.3亿贝利',
            },
            {
                name: '索隆',
                subject: '无',
                score: '3.2以贝利',
            },
            {
                name: '山治',
                subject: '无',
                score: '3.3亿贝利',
            }
        ];
        //往tbody里面创建
        var tbody = document.querySelector('tbody');
        for (let i = 0; i < arr.length; i++) {
            //创建行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //创建列  行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象
            for (let j in arr[i]) {  // 里面的for循环管列 td
                var td = document.createElement('td')
                td.innerHTML = arr[i][j];   // 把对象里面的属性值 arr[i][j] 给 td
                tr.appendChild(td);
            }
            //创建 删除单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除</a>';
            tr.appendChild(td);

        }
        // 删除操作
        var del = document.querySelectorAll('a');
        for (let i = 0; i < del.length; i++) {
            del[i].onclick = function () {
                // 点击a 删除整个行 行是 a 的父级的父级元素  node.removeChild(child)
                tbody.removeChild(this.parentNode.parentNode);
            }
        }


    </script>

</body>

效果图

点击删除前