HTML　DOM动态创建表格（１）

最新推荐文章于 2023-12-22 16:20:30 发布

weixin_34368949

最新推荐文章于 2023-12-22 16:20:30 发布

阅读量289

点赞数

文章标签： python json

原文链接：https://my.oschina.net/lvhuizhenblog/blog/308821

版权

2019独角兽企业重金招聘Python工程师标准>>>

<html>

<head>
    <style type = "text/CSS">
        table, td, th
        {
            border:1px solid black;
            color: red;
        }
    </style>
</head>


<body>
    
    <script>
        
        var txt = '[\
        {\
             "id":1,\
             "name":"张三",\
             "age":20\
        },\
        {\
            "id":2,\
            "name":"李四",\
            "age":21\
        },\
        {\
            "id":3,\
            "name":"王五",\
            "age":22\
        }\
        ]';
        
        
        var person = JSON.parse(txt);
        var myTab = document.createElement("table");
        document.body.appendChild(myTab);
        
        //创建表头
        var mytr = document.createElement("tr");
        for(var i in person[0])
        {
            var myth1 = document.createElement("th");
            var mythValue1 = document.createTextNode(i);
            myth1.appendChild(mythValue1);
            mytr.appendChild(myth1);
        }
        myTab.appendChild(mytr);
        //创建数据
        for(var j = 0; j < person.length; j++)
        {    
            var mytr2 = document.createElement("tr");
            for (var attribute in person[j])
            {
                var mytd1 = document.createElement("td");
                var mytdValue1 = document.createTextNode(person[j][attribute]);
                mytd1.appendChild(mytdValue1);
                mytr2.appendChild(mytd1);
            }
            myTab.appendChild(mytr2);
        }
    </script>
</body>
</html>

转载于:https://my.oschina.net/lvhuizhenblog/blog/308821