JavaScript 创建动态表格
版权声明:未经授权,严禁转载!
案例代码
<div id="data"></div> <script>
var json = [
{"ename": "王佳伟", "salary": 11000, "age": 18},//json[0]["ename"]
{"ename": "张三", "salary": 13000, "age": 21},//1
{"ename": "李四", "salary": 12000, "age": 36}//2
]; var data = document.getElementById("data");
// 创建一个 table
var table = document.createElement("table");
data.appendChild(table);
// 创建 thead
var thead =document.createElement("thead");
// 将thead 添加到 table
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;
thead.appendChild(th);
} //创建tbody
var tbody=document.createElement("tbody");
//将tbody添加到table中
table.appendChild(tbody);
//遍历数组
for(var i=0;i<json.length;i++){
//创建tr
var tr=document.createElement("tr");
//将tr添加到tbody
tbody.appendChild(tr);
//遍历数组中的某一个元素(关联数组)
for(key in json[i]){
//创建td
var td=document.createElement("td");
//将td添加到tr
tr.appendChild(td);
td.innerHTML=json[i][key]
}
} //将table添加到id为data的div下
data.appendChild(table); </script>