用DOM动态创建表格

最新推荐文章于 2022-04-19 12:32:23 发布

BoomShaKa_S

最新推荐文章于 2022-04-19 12:32:23 发布

阅读量947

点赞数 1

文章标签： DOM动态创建表格

本文链接：https://blog.csdn.net/weixin_41350225/article/details/86088484

版权

老样子，先上效果图
在这里插入图片描述
之后上源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        var stus = [{
            name: "王林",
            sex: "男",
            age: 18,
        }, {
            name: "孙雷",
            sex: "男",
            age: 19,
        }, {
            name: "王丽",
            sex: "女",
            age: 20,
        }, {
            name: "马东梅",
            sex: "女",
            age: 22,
        }];
        var arr = ["姓名","性别","年龄"];
        //创建数组arr，用来显示th的标题
        var body = document.querySelector("body");
        //查找body结点
        var table = document.createElement("table");
        //创建table结点
        body.appendChild(table);
        //向body中添加table节点
        var thead = document.createElement("thead");
        //创建thead节点
        table.appendChild(thead);
        //把thead节点添加到table节点
        var trd = document.createElement("tr");
        //创建tr节点
        thead.appendChild(trd);
        //向thead中添加tr节点
        for(let i = 0;i<arr.length;i++){    //遍历arr数组，通过数组下标获取数组中的元素
            var th = document.createElement("th");
            //创建th节点
            trd.appendChild(th);
            //向tr节点中添加th节点
            var text = document.createTextNode(arr[i]);
            //创建文本节点
            th.appendChild(text);
            //把文本节点添加到th节点中
        }
        var tbody = document.createElement("tbody");
        //创建tbody节点
        table.appendChild(tbody);
        //把tbody节点添加到table节点中
        for(let i=0;i<stus.length;i++){     //for循环遍历数组stus
            var tr = document.createElement("tr");
            //创建tr节点
            tbody.appendChild(tr);
            //把tr节点添加到tbody节点中
            for(let k in stus[i]){      //通过for-in循环遍历stus数组中每个属性的值value
                var td = document.createElement("td");
                //创建td节点
                tr.appendChild(td);
                //把td节点添加tr节点中
                var text = document.createTextNode(stus[i][k]);
                //创建文本节点
                td.appendChild(text);
                //把文本节点添加到td
            }
           
        }

    </script>
</body>

</html>