注:使用createDocumentFragment创建TABLE 行的效率要高
使用table自带方法和DOM方法操作HTML table的区别
table表格的操作有两种方法,一种是标准的Table对象方法:
方法 | 描述 | IE | F | O | W3C |
---|---|---|---|---|---|
createCaption() | 为表格创建一个 caption 元素。 | 4 | 1 | 9 | Yes |
createTFoot() | 在表格中创建一个空的 tFoot 元素。 | 4 | 1 | 9 | Yes |
createTHead() | 在表格中创建一个空的 tHead 元素。 | 4 | 1 | 9 | Yes |
deleteCaption() | 从表格删除 caption 元素以及其内容。 | 4 | 1 | 9 | Yes |
deleteRow() | 从表格删除一行。 | 4 | 1 | 9 | Yes |
deleteTFoot() | 从表格删除 tFoot 元素及其内容。 | 4 | 1 | 9 | Yes |
deleteTHead() | 从表格删除 tHead 元素及其内容。 | 4 | 1 | 9 | Yes |
insertRow() | 在表格中插入一个新行。 | 4 | 1 | 9 | Yes |
还有一种方法就是标准的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();
}
}
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);
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操作。