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中自定義。

 

如有疑問，可留言！