您的位置：首页 > Web前端 > JavaScript

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

2017-06-22 12:59 190 查看

思路：

创建 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航