<div id="data"></div>
table{
width: 600px;
text-align: center;
border-collapse: collapse;
}
th,td{
border: 1px solid #999;
}
var json=[
{"name":"A","score":"100","age":18},
{"name":"B","score":"90","age":19},
{"name":"C","score":"80","age":20}
];
//表table
var div=document.getElementById("data");
var table=document.createElement("table");
div.appendChild(table);
//表头thead
var thead=document.createElement("thead");
table.appendChild(thead);
//行tr
var tr=document.createElement("tr");
thead.appendChild(tr);
//列th
for(key in json[0]){
var th=document.createElement("th");
th.innerHTML=key;
tr.appendChild(th);
}
//表体tbody
var tbody=document.createElement("tbody");
table.appendChild(tbody);
//行tr
for(var i=0;i<json.length;i++){
var tr=document.createElement("tr");
//列td
for(key in json[i]){
var td=document.createElement("td");
td.innerHTML=json[i][key];
tr.appendChild(td);
}
tbody.appendChild(tr);
}
4_10.DOM--动态创建表格
最新推荐文章于 2021-03-16 01:32:20 发布