jQuery动态创建表格（2）

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_34318272

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量76

点赞数

文章标签： javascript python json ViewUI

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

版权

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

<html>
 
<head>
    <style type = "text/CSS">
        table, td, th
        {
            border:1px solid black;
            border-collapse:collapse;
            
        }
        
        table
        {
            width:12em;
        }
        
        td
        {
            text-align:center;
        }
        
        th
        {
            background:gray;
        }
        
    </style>
    <script src="jquery-2.1.1.js"></script>
     <script>
         
        var txt = '[\
        {\
             "id":1,\
             "name":"张三",\
             "age":20\
        },\
        {\
            "id":2,\
            "name":"李四",\
            "age":21\
        },\
        {\
            "id":3,\
            "name":"王五",\
            "age":22\
        }\
        ]';
         
         
        var person = JSON.parse(txt);
        $(document).ready(function(){
        
            var $myTab = $("<table></table>");
            $("body").append($myTab);
            var $myTr1 = $("<tr></tr>");
            
            //创建表头
            for(var i in person[0])
            {
                var $myth1 = $("<th></th>");
                $myth1.text(i);
                $myTr1.append($myth1);
            }
            $myTab.append($myTr1);
            
            //创建数据
            for(var j = 0; j < person.length; j++)
            {
                var $myTr2 = $("<tr></tr>");
                for(var attribute in person[j])
                {
                    var $myTd = $("<td></td>");
                    $myTd.text(person[j][attribute]);
                    $myTr2.append($myTd);
                }
                $myTab.append($myTr2);
            }
            
        })
    </script>
</head>
 
 
<body>
     
   
</body>
</html>

结果如图：

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