将给定的数据动态加入到创建的表格中

　　创建table+thead+tbody

　　创建tr+th

　　创建每一行的tr+td

　　加到页面中

　　注：最后再加到页面中的原因是每将一个元素加到页面一次，页面便会刷新一次，因此先在内存中创建好表格再一次性的加到页面中，页面只需刷新一次，减少性能的损失。

　　<!DOCTYPEhtml><htmllang="en"><head>

　　<metacharset="UTF-8">

　　<title>Title</title></head><body></body><script>

　　vardata=[

　　{name:"jim1",age:18,gender:"male"},

　　{name:"jim2",age:19,gender:"female"},

　　{name:"jim3",age:20,gender:"female"},

　　{name:"jim4",age:21,gender:"male"}

　　];functioncreateElement(tag){

　　returndocument.createElement(tag);

　　}vartable=createElement("table");varthead=createElement("thead");vartbody=createElement("tbody");

　　table.appendChild(thead);

　　table.appendChild(tbody);vartrhead=createElement("tr");

　　thead.appendChild(trhead);for(varkindata[0]){

　　th=createElement("th");

　　th.appendChild(document.createTextNode(k));

　　trhead.appendChild(th);

　　}for(vari=0;i<data.length;i++){vartr=createElement("tr");for(varjindata[i]){

　　td=createElement("td");

　　td.appendChild(document.createTextNode(data[i][j]));

　　tr.appendChild(td);

　　}

　　tbody.appendChild(tr);

　　}//table.setAttribute("border","1px");

　　//或直接设置table.border="1px";两者等价。

　　table.border="1px";

　　table.cellspadding=0;

　　table.setAttribute("align","center");

　　table.style.textAlign="center";

　　table.setAttribute("borderColor","skyBlue");

　　table.setAttribute("cellspacing",0);

　　document.body.appendChild(table);</script></html>

　　以上就是对将给定的数据动态加入到创建的表格中（源代码）的全部介绍，本文内容紧凑，希望大家可以有所收获，更多请关注PHP中文网。

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54467.shtml