DOM中通过循环创建动态表格

动态创建表格


table{width:600px; border-collapse:collapse;
text-align:center;
}
td,th{border:1px solid #ccc}

var json=[
{“ename”:”Tom”, “salary”:11000, “age”:25},
{“ename”:”John”, “salary”:13000, “age”:28},
{“ename”:”Mary”, “salary”:12000, “age”:25}
];

var table=document.createElement(“table”);

var thead= table.createTHead();
var tr=thead.insertRow();
for(var key in json[0]){
tr.insertCell().innerHTML=key;
}
// tr.insertCell().innerHTML=”删除”;
var tbody=table.createTBody();

for(var emp of json){
var tr=tbody.insertRow(0);//插入一行到tbody中
for(var key in emp){
//创建td追加到tr中 设置td的内容为key对应的值
tr.insertCell().innerHTML=emp[key];
}
var btn=document.createElement(“button”);
}
document.getElementById(“data”)
.appendChild(table);

效果图