2024年11月22日 星期五 首页 编程论坛 技术文档 黑客安全 源代码 应用下载 电子图书 电脑硬件 游戏开发 休闲娱乐 编程网站  
‹‹ 上一主题 | 下一主题 ››
发新话题
打印

快速建立表格

anywhere

初级程序员

Rank: 2Rank: 2
1# 大中 小发表于 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+'</td></tr>';  
}  
sTmp  +=  '<table>';  
testT.innerHTML  =  sTmp;  
</script>  

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

TOP

阳光

初级程序员

Rank: 2Rank: 2
2# 大中 小发表于 2006-4-21 15:34  只看该作者
如果一次显示一行的话，用  insertRow();再用  replaceNode()  替换原来的行就可以了吧。  
如果只是添加显示行的话，用  insertRow();就可以了吧。

TOP

none

初级程序员

Rank: 2Rank: 2
3# 大中 小发表于 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=  '<tr><td>'+i+'</td></tr>';  
}  
test.innerHTML  =  '<table>'+sTmp.join("")+'</table>';  
alert(new  Date()-b)  
</script>  
</body>

TOP

dadijin

初级程序员

Rank: 2Rank: 2
4# 大中 小发表于 2006-4-21 15:35  只看该作者
错误,insertRow是各钟添加行的方法中最慢的  

见  
http://expert.csdn.net/Expert/to ... l?temp=3.767031E-02

TOP

血刃男爵

初级程序员

Rank: 2Rank: 2
5# 大中 小发表于 2006-4-21 15:36  只看该作者
insertRow的确慢，用循环操作一个变量，然后一下子把变量写入innerHTML  

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

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

TOP

tingtingzhuai

初级程序员

Rank: 2Rank: 2
6# 大中 小发表于 2006-4-21 15:37  只看该作者
<script>  
var  arrList  =  new  Array(1000);  
for(i=0;i<arrList.length;i++){  
     arrList=  "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+'</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=  '<tr><td>'+i+'</td><TD>'+arrList+'</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>

TOP

tutuzuiai

初级程序员

Rank: 2Rank: 2
7# 大中 小发表于 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=tr//i可用rows.length代之  
           }

TOP

woyoudianfeng

初级程序员

Rank: 2Rank: 2
8# 大中 小发表于 2006-4-21 15:38  只看该作者
innerHTML最块

TOP

‹‹ 上一主题 | 下一主题 ››
发新话题