动态生成表格的案例

最新推荐文章于 2022-11-06 11:06:54 发布

原创

最新推荐文章于 2022-11-06 11:06:54 发布 · 2.3k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

该案例旨在展示如何根据数据库数据动态创建表格。通过设定表头属性对应数据对象的属性，使用JavaScript动态生成表格内容。首先创建tbody，然后根据数据对象数量插入行，并为每行创建相应数量的单元格。同时实现删除功能，允许用户点击任意删除按钮移除行。最终效果是用户点击删除按钮时，会删除所选行。

案例目的：
在实际情况下，数据往往都是从数据库获得的，因此需要动态生成表格
实践思路：

先建立好表头属性，表头的每一个属性就是数据（对象）的每一个属性
准备好数据，因为每个数据都是动态的，所以我们需要js动态生成，数据采用对象形式存储。
先往tbody里面创建行，再在行里面创建单元格，行的数量取决于有几个对象，单元格的数量取决于每个对象有几个属性
创建删除单元格，进行删除操作

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

        </tbody>
    </table>
    <script>