js dom之动态创建表格最详细

最新推荐文章于 2025-08-18 14:58:44 发布

原创最新推荐文章于 2025-08-18 14:58:44 发布 · 681 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍了一种使用JavaScript动态生成HTML表格的方法。通过解析数据并利用DOM操作，该示例实现了从数组数据中创建表格结构，包括表头和内容行。

<!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>

</head>

<body>

    <script>
        var data = [
            { name: "齐全", age: 5, salary: 12 },
            { name: "物体", age: 6, salary: 13 },
            { name: "任然", age: 7, salary: 14 },
            { name: "探讨", age: 8, salary: 15 },
            { name: "引用", age: 9, salary: 16 },
            { name: "泡泡", age: 4, salary: 17 },
            { name: "搜索", age: 3, salary: 18 },
            { name: "叮当", age: 2, salary: 19 },
        ];
创建表格
        var table = document.createElement("table");  创建table,此时不显示
        document.body.appendChild(table);  增加,添加table标签,此时显示
创建表格行
        var tr = document.createElement("tr"); 创建tr,此时不显示
        document.body.appendChild(tr);  增加,添加tr标签,此时显示

        for (var key in data[0]) {  // for in 循环,遍历key,比如说就是把叮当这一行的每一个key都遍历到,意思就是得到每一个key,结果是得到了name,age,salary,如果不循环,得不到这好几个key,角标可以是0或者1,2,因为每一行的key都是一样的,都是name,age等等,这个data=的是一个数组,所以用角标的方式获取//

            var td = document.createElement("td") 创建单元格
            tr.appendChild(td);
            td.innerHTML = key  把key的具体属性名添加到单元格中,具体属性名就是比如name,age,salary,这个单元格是第一行的单元格,所以是表头的作用
}

for (var i = 0; i < data.length; i++) {
            var tr = document.createElement("tr");
            table.appendChild(tr);  循环表格行,使每一行都能表现出来,本行是把tr加入表格内,这个tr是第二行到最后一行,第一行在前面已经设置了
            for (var key in data[i]) {  注意i带了角标
                var td = document.createElement("td"); 
                tr.appendChild(td);
                td.innerHTML = data[i][key]  为单元格添加内容,这里做了取值处理,动态取值,用的是中括号取值,取得是key里面的值
            }
        }  两个for循环,第二个for循环是双层嵌套的
    </script>

</body>

</html>

标签

#javascript