创建表和表体

创建tr th

创建每一行的tr td

加到页面中

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

！DOCTYPEhtmlhtmllang='en'head

' UTF-8 '

标题标题/标题/头体/体脚本

vardata=[

{姓名：'jim1 '，年龄：18,性别： '男性' },

{姓名：'jim2 '，年龄：19,性别： '女' },

{姓名：'jim3 '，年龄：20,性别： '女' },

{姓名：'jim4 '，年龄：21,性别： '男性' }

];functioncreateElement(标记){

returndocument.createElement(标记);

} var table=CreateElement(' table ')；var thead=CreateElement(' thead ')；vart body=CreateElement(' t body ')；

桌子。appendchild(ad)；

桌子。appendchild(t body)；var tr head=CreateElement(' tr ')；

泰德。appendchild(tr head)；for(varkindata[0]){

th=CreateElement(' th ')；

th。appendchild(文档。createTextNode(k))；

trhead。appendchild(th)；

} for(vari=0；idata . LengiI){ vartr=CreateElement(' tr ')；for(varjindata[i]){

TD=create element(' TD ')；

TD。appendchild(文档。CreateTextNode(数据[I][j])；

tr。appendchild(TD)；

}

t型车身。appendchild(tr)；

}//table.setAttribute('border '，' 1px ')；

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

table.border=' 1px

桌子。cellspadding=0；

table.setAttribute('align '，' center ')；

桌子。风格。TextAlign='居中'；

桌子。SetAttribute(' borderColor '，'天蓝色')；

桌子。SetAttribute('单元格间距'，0)；

document.body.appendChild(表格);/script/html

以上就是对将给定的数据动态加入到创建的表格中（源代码)的全部介绍，本文内容紧凑，希望大家可以有所收获，更多请关注服务器端编程语言(专业超文本预处理器的缩写)中文网。

本文转载自中文网