Javascript学习：综合案例4--json表单输出

最新推荐文章于 2022-03-01 16:30:06 发布

酷jjs

最新推荐文章于 2022-03-01 16:30:06 发布

阅读量199

点赞数

分类专栏：前端笔记 Javascript

本文链接：https://blog.csdn.net/qq_32584661/article/details/80705665

版权

前端笔记同时被 2 个专栏收录

165 篇文章 2 订阅

订阅专栏

Javascript

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #table tr{height:30px;line-height:30px;background:#00CCFF;
            text-align: center;color:#333;}
        #table .header{height:40px;line-height:40px;background:#333;color:#fff;}
        #table td{width:120px;}
    </style>
</head>


<body>

    <script>

        var jsonstr='[{"name":"小a","age":15,"sex":"男"},{"name":"小b","age":14,"sex":"女"},{"name":"小c","age":15,"sex":"男"}]';
        var table="table";

        function outData(jsonstr,id) {

            jsonArray= JSON.parse(jsonstr);

            document.write("<table id='"+id+"'>");

            document.write("<tr class='header'>");
            for( i in jsonArray[0]) {
                document.write("<td>" + i + "</td>");
            }
            document.write("</tr>");

            for( i in jsonArray){
                document.write("<tr>");
                for( j in jsonArray[i]){
                    document.write("<td>"+jsonArray[i][j]+"</td>");
                }
                document.write("</tr>");
            }
            document.write("</table>");
        };

        outData(jsonstr,table);

    </script>

</body>
</html>