4_10.DOM--动态创建表格

<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);	
}