码迷,mamicode.com
首页 > Web开发 > 详细

js加载json数据成表格

时间:2017-11-07 14:27:00      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:turn   data   https   item   pad   logs   title   stat   jquer   

根据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>

  

js加载json数据成表格

标签:turn   data   https   item   pad   logs   title   stat   jquer   

原文地址:http://www.cnblogs.com/dasheng-maritime/p/7798526.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!