查看完整版本: 快速建立表格

anywhere 2006-4-21 15:32

快速建立表格

<table></table>  
要通过js来把一个数组中的内容动态的一行行的显示到table中，如何实现？  

注意：不能用innerHTML属性来重置整个table的内容（因为数组非常大，如果用innerHTML来动态重建table的话显示速度会大受影响）。  

目前的做法是(这是示例，实际的arrList的数据量会非常大)：  
<div  id=testT></div>  

<script>  
var  arrList  =  new  Array("a","b","c");  
var  sTmp  =  '';  
sTmp  +=  '<table>';  
for(i=0;i<arrList.length;i++){  
       sTmp  +=  '<tr><td>'+i+'</td><td>'+arrList[i]+'</td></tr>';  
}  
sTmp  +=  '<table>';  
testT.innerHTML  =  sTmp;  
</script>  

能否通过采用其他方法而不使用innerHTML来提高动态显示的效率和速度？

阳光 2006-4-21 15:34

如果一次显示一行的话，用  insertRow();再用  replaceNode()  替换原来的行就可以了吧。  
如果只是添加显示行的话，用  insertRow();就可以了吧。

none 2006-4-21 15:34

我认为的最快的方法  
<body>  
<div  id=test></div>  
<script>  
var  arrList  =  new  Array(1000);  
var  b=new  Date()  
var  sTmp  =  new  Array();  
for(i=0;i<arrList.length;i++){  
       sTmp[i]=  '<tr><td>'+i+'</td></tr>';  
}  
test.innerHTML  =  '<table>'+sTmp.join("")+'</table>';  
alert(new  Date()-b)  
</script>  
</body>

dadijin 2006-4-21 15:35

错误,insertRow是各钟添加行的方法中最慢的  

见  
[url]http://expert.csdn.net/Expert/topic/1547/1547091.xml?temp=3.767031E-02[/url]

血刃男爵 2006-4-21 15:36

insertRow的确慢，用循环操作一个变量，然后一下子把变量写入innerHTML  

基本上快不了多少，我做（9000单元格/4）行的表格，超慢。  

太多的话还是放到后台，这样用户至少不会觉得太慢

tingtingzhuai 2006-4-21 15:37

<script>  
var  arrList  =  new  Array(1000);  
for(i=0;i<arrList.length;i++){  
     arrList[i]=  "arrList["+i+"]";  
}  
function  test1()  
{  
           var  d=new  Date();              
           var  sTmp  =  '';  
           sTmp  +=  '<table>';  
           for(i=0;i<arrList.length;i++){  
                   sTmp  +=  '<tr><td>'+i+'</td><td>'+arrList[i]+'</td></tr>';  
           }  
           sTmp  +=  '<table>';  
           testT.innerHTML  =  sTmp;  
           alert(new  Date()-d);  
}  

function  test2()  
{  
           var  d=new  Date()  
           var  sTmp  =  new  Array();  
           for(i=0;i<arrList.length;i++){  
                   sTmp[i]=  '<tr><td>'+i+'</td><TD>'+arrList[i]+'</TD></tr>'  ;  
           }  
           testT.innerHTML  =  '<table>'+sTmp.join("")+'</table>';  
           alert(new  Date()-d)  
}  
</script>  
<input  type="button"  name="Button2"  value="test1"  onClick="test1()">  
<input  type="button"  name="Button3"  value="join"  onClick="test2()">  
<div  id="testT"></div>

tutuzuiai 2006-4-21 15:37

//dom:<table  id=tb><tr><td>  
//tb.childNodes[0]为tbody  
//tbody.childNodes[tb.childNodes[0].childNodes.length]为新行  
//没经测试  

           var  tb=docment.all("tb")  
           var  rows=tb.childNodes[0].childNodes  
           for  (var  i=1;i<your_array.length;i++)  
           {  
                       tr=docment.createElement("tr")  
                       设置tr属性:set...(忘了这属性这单词)  
                       rows[i]=tr//i可用rows.length代之  
           }

woyoudianfeng 2006-4-21 15:38

innerHTML最块
页: [1]
查看完整版本: 快速建立表格