本篇文章给大家带来的内容是关于将给定的数据动态加入到创建的表格中（源代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
思路：
创建 table + thead + tbody
创建 tr + th
创建每一行的 tr + td
加到页面中
注：最后再加到页面中的原因是每将一个元素加到页面一次，页面便会刷新一次，因此先在内存中创建好表格再一次性的加到页面中，页面只需刷新一次，减少性能的损失。
<!DOCTYPE html><html lang=en><head>
<Meta charset=UTF-8>
<title>Title</title></head><body></body><script>
var data = [
{ name : jim1, age : 18, gender : male},
{ name : jim2, age : 19, gender : female},
{ name : jim3, age : 20, gender : female},
{ name : jim4, age : 21, gender : male}
]; function createElement( tag ) {
return document.createElement( tag );
} var table = createElement( table ); var thead = createElement( thead ); var tbody = createElement( tbody );
table.appendChild( thead );
table.appendChild( tbody ); var trhead = createElement( tr );
thead.appendChild( trhead ); for ( var k in data[ 0 ] ){
th = createElement( th );
th.appendChild( document.createTextNode( k ) );
trhead.appendChild( th );
} for ( var i = 0; i < data.length; i++){ var tr = createElement( tr ); for ( var j in data[ 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>
原文地址：https://www.jb51.cc/html/1207849.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
