用两种方式创建Table
createElement() //创建一个HTML元素
setAttribute() //设置一个属性
appendChild() //向页面或向某个元素里添加元素
removeChild() //删除元素
insertRow() //添加表格行
insertCell() //添加单元格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<mce:script type="text/javascript"><!--
var d = {
fields:["id","name","sex","age"],
datas:[
["1001","张飞","男","21"],
["1002","吕布","男","21"],
["1003","赵云","男","21"],
["1004","曹操","男","21"]
]
};
var arrD = d.datas;
for(var i=0;i<10000;i++){
arrD.push([i,"test","test","test"]);
}
//这是一个相对比较快速的 table 创建方法：
/*
要点1，用array 的join方法而不是用"+"来连接字符串。
要点2，生成的html包裹在一个统一的块级元素中（比如table,div等）提交，而不要分开提交（比如生成多个tr重复添加给一个table）。
*/
function CreateTable(arr){
var arrHTML = [];
for(var i=0,j=arr.length;i<j;i++){
arrHTML.push(arr[i].join("</td><td>"));
}
return "<table><tr><td>" + arrHTML.join("</td></tr><tr><td>") + "</td></tr></table>";
}
//下面创建DOM节点来创建table:
function CreateTableByDom(arr){
var _table = document.createElement("table");
var _tbody = document.createElement("tbody");
var _tr,td;
for(var i=0,j = arr.length;i<j;i++){
_tr = document.createElement("tr");
for(var x=0,y = arr[i].length; x<y; x++){
_td = document.createElement("td");
_td.appendChild(document.createTextNode(arr[i][x]));
_tr.appendChild(_td);
}
_tbody.appendChild(_tr);
}
_table.appendChild(_tbody);
return _table;
}
function testCreateTable(){
var t1=(new Date()).getTime();
document.getElementById("container").innerHTML = CreateTable(arrD);
t2 = (new Date()).getTime();
alert(t2-t1);
}
function testCreateTableByDom(){
var t1=(new Date()).getTime();
document.getElementById("container").appendChild(CreateTableByDom(arrD));
t2 = (new Date()).getTime();
alert(t2-t1);
}
// --></mce:script>
<mce:style type="text/css"><!--
table{
border:#000000 1px solid;
}
td{
border:#000000 1px solid;
}
--></mce:style><style type="text/css" mce_bogus="1">table{
border:#000000 1px solid;
}
td{
border:#000000 1px solid;
}</style>
</head>
<body>
<input type="button" value="生成table innerHTML方法" onclick="testCreateTable()"/>
<input type="button" value="生成table DOM插入方法" onclick="testCreateTableByDom()"/>
<div id="container">
</div>
</body>
</html>