html根据数据动态创建表格,HTML DOM动态创建表格（１）

table, td, th

{

border:1px solid black;

color: red;

}

var txt = '[\

{\

"id":1,\

"name":"张三",\

"age":20\

},\

{\

"id":2,\

"name":"李四",\

"age":21\

},\

{\

"id":3,\

"name":"王五",\

"age":22\

}\

]';

var person = JSON.parse(txt);

var myTab = document.createElement("table");

document.body.appendChild(myTab);

//创建表头

var mytr = document.createElement("tr");

for(var i in person[0])

{

var myth1 = document.createElement("th");

var mythValue1 = document.createTextNode(i);

myth1.appendChild(mythValue1);

mytr.appendChild(myth1);

}

myTab.appendChild(mytr);

//创建数据

for(var j = 0; j 

{

var mytr2 = document.createElement("tr");

for (var attribute in person[j])

{

var mytd1 = document.createElement("td");

var mytdValue1 = document.createTextNode(person[j][attribute]);

mytd1.appendChild(mytdValue1);

mytr2.appendChild(mytd1);

}

myTab.appendChild(mytr2);

}