js 动态生成表格案例

最新推荐文章于 2022-09-26 16:49:40 发布

a63438840

最新推荐文章于 2022-09-26 16:49:40 发布

阅读量1.9k

点赞数 4

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shanlu0000/p/11478994.html

版权

本文介绍了如何使用JavaScript动态生成表格，包括布局、样式和具体步骤。首先，创建包含thead和tbody的table结构，thead固定，tbody内容动态生成。接着，准备数据并用for循环动态创建tbody中的行和单元格，每行对应数据对象的一个属性。同时，在最后一列添加删除按钮，点击可删除相应行。关键代码包括数组数据准备、循环遍历创建单元格、设置删除功能等。

摘要由CSDN通过智能技术生成

<1>布局：一个table表格，表格分为两个部分，上面是thead表头，表头里面仅一行，有4列（th), 下面是tbody表格内容，要求tbody中的每一行都是用js动态创建的

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

    <tbody>

    </tbody>
</table>
</body>

<2>样式

<style>
        *{
            padding:0;
            margin:0;
        }
        table{
            width:500px;
            margin:100px auto;
            border-collapse:collapse;/*边框合并模式*/
            text-align:center;
        }
        td,th{  /*td是后面tbody中动态创建的单元格，th是thead里面那一行中的单元格*/
            border:1px solid #333;
        }
        thead tr{
            height:40px;
            background-color: #cccccc;
        }

<3>js动态创建表格：

第一步：先准备数据，一共有三个人的成绩，作为三个对象放进数组中

 var datas=[{
        name:"甲",
        subject:"javascript",
        score:100
    },{
        name:"乙",
        subject:"javascirpt",
        score:99
    },{
        name:"丙",
        subject: