table表格的操作有两种方法，一种是标准的Table对象方法：
详见w3c school
http://www.w3school.com.cn/htmldom/dom_obj_table.asp
还有一种方法就是标准的DOM操作方法。只是将table看成一个普通的DOM元素来操作。两种方法都写一个代码在表格中增加100*100个单元格。
<table border="1" id="table1" bordercolor="#000" style="border-collapse:collapse;"></table>
代码一：使用Table对象
//使用table自带的方法操作
var table1= document.getElementById("table1")
for (var i=0;i<100 ; i++){
var row = table1.insertRow(-1);
for (var j=0;j<100 ; j++){
var cell = row.insertCell(-1);
cell.innerHTML=(new Date()).getTime();
}
}
代码二：使用DOM操作:
var f = document.createDocumentFragment();
for (var i=0;i<100 ; i++){
var tr = document.createElement("tr");
for (var j=0;j<100 ; j++){
var td = document.createElement("td");
var text = document.createTextNode((new Date()).getTime());
td.appendChild(text);
tr.appendChild(td);
}
f.appendChild(tr);
}
document.getElementById("tbody1").appendChild(f);
我先测试了一下两种方法的运行性能。我力求用性能最好的DOM操作方法去操作table。粗略的测试出的数据
|
Internet Explorer 8 |
FireFox 3.6.13 |
Chrome 8 |
Safari 5 |
Opera 10 |
| 使用DOM操作 |
1204ms |
380ms |
62ms |
170ms |
174ms |
| 使用table操作 |
14719ms |
2404ms |
423ms |
199ms |
357ms |
使用DOM的操作性能显然要比Table对象操作要快。我之所以去测试是担心是否是原生的Table方法操作起来性能更好。从上面的数据明显可以说明。Table对象的方法其实也是DOM操作。影响性能的还是取决于页面重绘的次数。显然使用insertRow和inertCell也会导致页面重绘。100*100次重绘。而使用DOM Fragment。页面只重绘了1次。
测试不同浏览器的耗时是想看看各种浏览器对Table对象的方法支持情况，还好，都支持。当然还是要恶心一下IE，谁叫他老是最慢。
从代码上来看使用Table标准方法的代码比DOM操作的代码要简洁直观一些。
总的来说，对于少量的表格操作，可以使用Table对象自带的方法来操作，对于大量的Table操作还是要使用最优的DOM操作。至于什么是最优的DOM操作。强烈推荐大家去看看
High Performance JavaScript这本书"
http://www.ppurl.com/2010/04/high-performance-javascript.html"