js加载json数据成表格

根据json文件，读取并自动生成表格；

处理JSON的文件是将JSON串保存在js文件中，定义了一个变量名等于这个JSON串（数组）。

参考：

https://my.oschina.net/TOW/blog/734589

http://www.cnblogs.com/rainlam163/p/3259494.html

<html>
<head>
    <title></title>
    <style type="text/css">
        table
        {
            padding: 0;
            margin: 0;
            border-collapse: collapse;
        }
        td
        {
            border: 1px solid #009999;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
            text-align: center;
        }
    </style>
    </head>
    <body>
    <hr/>
    <h1>Tablespace statistic </h1>
    <table id="table_tablespaces">
    </table>
    <hr/>
    <h1>Database statistic </h1>
    <table id="table_dbs">
    </table>
    </body>
<script src="jquery-3.2.1.min.js"  type="text/javascript"></script>
<script src="tablespaces_statistic.js" type="text/javascript"></script>
<script src="dbs_statistic.js" type="text/javascript"></script>
<script>  
function get_contaion(name){
    var html;
    $.each(name, function (index, item) {
        if (index === 0) {
            html += "<tr>";
            $.each(item, function (vlaIndex) {
                html += "<td style='background:#C1DAD7'>";
                html += vlaIndex;
                html += "</td>";
            });
            html += "</tr>";
        }
        html += "<tr>";
        $.each(item, function (vlaIndex, valItem) {
            html += "<td>";
            html += valItem;
            html += "</td>";
        });
        html += "</tr>";
    });
    return html;
}

$(function(){
    $("#table_tablespaces").html(get_contaion(tablespaces_info));
    $("#table_dbs").html(get_contaion(dbs_info));
});
</script>

</html>

　　

posted @ 2017-11-07 13:04  百变小超  阅读(8442)  评论(0)    收藏  举报