js中用json对象创建一个table表格 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title></title>
    <script type="text/javascript">
        /*通过onload事件来让数据进行加载*/
        function myFunction() {
            var stuInfo = '{"stu": [' +
                '{"stuName":"张三","stuAge":"18","stuSex":"男","stuPhone":"13345401398","stuAdr":"湖北省荆州市荆州区"},' +
                '{"stuName":"李四","stuAge":"19","stuSex":"女","stuPhone":"13456402238","stuAdr":"湖北省武汉市"},' +
                '{"stuName":"王五","stuAge":"22","stuSex":"男","stuPhone":"13567403568","stuAdr":"湖北省荆州市荆州区江陵县"}]}';
            //将json数组字符串转换为数组对象
            var stuObj = JSON.parse(stuInfo);
            for (var i = 0; i < stuObj.stu.length; i++) {
                //创建元素对象tr
                var tr = document.createElement("tr");
                //通过for in 将stuObj.stu[i]内的数据进行遍历
                for (var k in stuObj.stu[i]) {
                    //创建元素对象td
                    var td = document.createElement("td");
                    //为td元素对象赋值，并将td文本内容添加到td上
                    td.appendChild(document.createTextNode(stuObj.stu[i][k]));
                    //将td元素节点添加到tr上
                    tr.appendChild(td);
                };
                //将tr元素节点添加到table上
                document.getElementById("stu").appendChild(tr);
            };
        }
    </script>
</head>
<body onload="myFunction()">
<table border="1" style="text-align:center" id="stu">
    <tr>
        <th>学生名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>联系电话</th>
        <th>地址</th>
    </tr>
</table>
</body>
</html>
posted @ 2023-04-11 22:07  一叶丶飘霖  阅读(252)  评论(0)    收藏  举报