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>
    

      

  • 相关阅读:
    selenium之css selector
    selenium之xpath
    selenium的一些概念
    HTML基础(四)JS
    HTML基础(三)DOM操作
    HTML基础(二)CSS
    HTML基础(一)HTML标签
    python学习笔记(六)发邮件、写日志、操作redis、导入模块
    python学习笔记(五)模块、第三方模块安装、模块导入
    python学习笔记(四)函数(下)、模块、集合
  • 原文地址:https://www.cnblogs.com/dasheng-maritime/p/7798526.html
Copyright © 2011-2022 走看看