html解析json数据为表格table显示

最新推荐文章于 2025-06-20 22:56:13 发布

原创最新推荐文章于 2025-06-20 22:56:13 发布 · 3w 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<table id="table" border="1" cellspacing="0" cellpadding="0" >
   <tr>
        <th>BrandName</th>
        <th>Modul</th>
        <th>Quantity</th>
        <th>Datecode</th>
        <th>Remark</th>
    </tr>
</table>
<script>
window.onload=function(){
var data=[{"BrandName":"ACES","Modul":"91906-0227P","Quantity":"3057","Datecode":"W2Y","Remark":"stock"},
{"BrandName":"ADI","Modul":"ADM706TARZ-REEL","Quantity":"2145","Datecode":"W2Y","Remark":"stock"},
{"BrandName":"ADI","Modul":"ADR02AUJZ-REEL7","Quantity":"2131","Datecode":"W2Y","Remark":"stock"}];

    
    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].BrandName;
                            var c2=row.insertCell(1);
                            c2.innerHTML=data[i].Modul;
                            var c3=row.insertCell(2);
                            c3.innerHTML=data[i].Quantity;
                            var c4=row.insertCell(3);
                            c4.innerHTML=data[i].Datecode;
                            var c5=row.insertCell(4);
                            c5.innerHTML=data[i].Remark;
                        }
}
</script>
</body>
</html>