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.οnlοad=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中自定义。

转载于:https://www.cnblogs.com/yuanxinru321/p/7306556.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值