zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    使用RedisTemplate的操作类访问Redis(转载)
    Redis集群方案(来自网络)
    Scale-up and Scale-out(转载)
    数据结构和算法分析 优先队列
    数据结构和算法分析 排序
    linux下的常用命令
    Java HashMap的工作原理(转载)
    二叉查找树(转载)
    Redis实现之对象(三)
    Redis实现之对象(二)
  • 原文地址:https://www.cnblogs.com/dasheng-maritime/p/7798526.html
Copyright © 2011-2022 走看看