使用table自带方法和DOM方法操作HTML table的区别

注：使用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

详见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操作。