JavaScript（二）——创建表格

Bertha 。 2023-06-26 12:12 6阅读 0赞

<!DOCTYPE html>
    <html> 
        <head>
            <title></title>
            <style type="text/css">
                
            </style>
            <script type="text/javascript" src="J.js"></script>
            <script type="text/javascript">
                // json格式的字符串
                var str = '[{name:"张三",sex:"男",age:19},{name:"李四",sex:"男",age:29},{name:"杨中科",sex:"男",age:39}]';
                onload = function() {
                    
                    // 生成一个table，然后追加到body中
                    
                    // 一开始就需要生成一个table
                    // 里面遍历json对象生成里面的tr
                    // 每一个json对象中的每一个成员(for-in)得到td标签
                    
                    // 1、生成table
                    var table = document.createElement("table");
                    table.border = "1";
                    // 2、得到json格式的对象
                    var jsons = new Function("return " + str)();
                    
                    // 3、循环这个数组
                    for(var i = 0; i < jsons.length; i++) {
                        // 4、生成每一个行
                        // 创建tr标签
                        var tr = document.createElement("tr");
                        // 5、添加td，就需要遍历每一个对象中的成员
                        for(var k in jsons[i]) {
                            // 6、创建td
                            var td = document.createElement("td");
                            td.appendChild(document.createTextNode(jsons[i][k]));
                            // 7、追加td
                            tr.appendChild(td);
                        }
                        // 循环结束，就得到一个行
                        // 将行追加到table
                        table.appendChild(tr);
                    }
                    // 将table加到body中
                    document.getElementsByTagName("body")[0].appendChild(table);
                    
                    var _ = 0;
                };
            </script>
        </head>
        <body>
        </body>
    </html>