zoukankan      html  css  js  c++  java
  • js循环读取json数据,将读取到的数据用js写成表格

    ①js循环读取json数据的方式:

    var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},{"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},{"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},{"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23}]
    for(var i=0;i<data.length;i++){
            alert(i);
            alert(data[i]);
            alert("id:"+data[0].uid+"name:"+data[0].uname);

    ②将读取到的数据用js写成表格:

    html部分:

    <table id="table">
        <tr>
            <th>uid</th>
            <th>uname</th>
            <th>sum</th>
        </tr>
    </table>

    js部分:

    window.onload=function(){
    var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23},{"uid":"2689","uname":"*江阴国际会展中心管理有限公司 024","sum":0},{"uid":"2686","uname":"江苏申利实业股份有限公司 001","sum":7917.94},{"uid":"2715","uname":"江阴市吉达针纺有限公司 115","sum":41.39},{"uid":"2688","uname":"*江苏省南菁高级中学 022","sum":274.23}]
            /*for(var i=0;i<data.length;i++){
            alert(i);
            alert(data[i]);
            alert("id:"+data[0].uid+"name:"+data[0].uname)
        }*/js循环读取json数据
        var table=document.getElementById("table");
        for(var i=0;i<data.length;i++){
            var row=table.insertRow(table.rows.length);
            var c1=row.insertCell(0);
            c1.innerHTML=data[i].uid;
            var c2=row.insertCell(1);
            c2.innerHTML=data[i].uname;
            var c3=row.insertCell(2);
            c3.innerHTML=data[i].sum;
        }
    }

    运行结果:

    表格样式可在css中自定义。

    如有疑问,可留言!

  • 相关阅读:
    rapidjson代码封装类
    CEF3.2623使用记录:windows编译
    ACE主动对象模式
    理解i++和++i
    ubuntu安装vmplayer出现问题的解决方法
    WinSpy涉及的windows api
    winXP下安装opensshd服务
    资源下载链接
    FPM打包工具
    mysql error code
  • 原文地址:https://www.cnblogs.com/yuanxinru321/p/7306556.html
Copyright © 2011-2022 走看看