快速建立表格

1<table></table>

要通过js来把一个数组中的内容动态的一行行的显示到table中,如何实现?

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

目前的做法是(这是示例,实际的arrList的数据量会非常大):

1<div id="testT"></div>
 1<script>   
 2var arrList = new Array("a","b","c");   
 3var sTmp = '';   
 4sTmp += '<table>';   
 5for(i=0;i<arrList.length;i++){   
 6sTmp += '<tr><td>'+i+'</td><td>'+arrList[i]+'</td></tr>';   
 7}   
 8sTmp += '<table>';   
 9testT.innerHTML = sTmp;   
10</script>

能否通过采用其他方法而不使用innerHTML来提高动态显示的效率和速度?
急用,在线等待!!!!
---------------------------------------------------------------

我所知道也只是用innerHTML,帮你up
---------------------------------------------------------------

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

我认为的最快的方法

 1<body>
 2<div id="test"></div>
 3<script>   
 4var arrList = new Array(1000);   
 5var b=new Date()   
 6var sTmp = new Array();   
 7for(i=0;i<arrList.length;i++){   
 8sTmp[i]= '<tr><td>'+i+'</td></tr>';   
 9}   
10test.innerHTML = '<table>'+sTmp.join("")+'</table>';   
11alert(new Date()-b)   
12</script>
13</body>

---------------------------------------------------------------

insertRow
---------------------------------------------------------------

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


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

up
---------------------------------------------------------------

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

基本上快不了多少,我做(9000单元格/4)行的表格,超慢。

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

用数组然后join的方法会快一点,也就是nolonely(琴令人寂,月令人孤)的方法
下面是测试的代码

 1<script>   
 2var arrList = new Array(1000);   
 3for(i=0;i<arrList.length;i++){   
 4arrList[i]= "arrList["+i+"]";   
 5}   
 6function test1()   
 7{   
 8var d=new Date();   
 9var sTmp = '';   
10sTmp += '<table>';   
11for(i=0;i<arrList.length;i++){   
12sTmp += '<tr><td>'+i+'</td><td>'+arrList[i]+'</td></tr>';   
13}   
14sTmp += '<table>';   
15testT.innerHTML = sTmp;   
16alert(new Date()-d);   
17}   
18  
19function test2()   
20{   
21var d=new Date()   
22var sTmp = new Array();   
23for(i=0;i<arrList.length;i++){   
24sTmp[i]= '<tr><td>'+i+'</td><TD>'+arrList[i]+'</TD></tr>' ;   
25}   
26testT.innerHTML = '<table>'+sTmp.join("")+'</table>';   
27alert(new Date()-d)   
28}   
29</script>
1<input name="Button2" onclick="test1()" type="button" value="test1"/>
1<input name="Button3" onclick="test2()" type="button" value="join"/>
1<div id="testT"></div>

---------------------------------------------------------------

//dom:

 1<table id="tb"><tr><td>   
 2//tb.childNodes[0]为tbody   
 3//tbody.childNodes[tb.childNodes[0].childNodes.length]为新行   
 4//没经测试   
 5  
 6var tb=docment.all("tb")   
 7var rows=tb.childNodes[0].childNodes   
 8for (var i=1;i&lt;your_array.length;i++)   
 9{   
10tr=docment.createElement("tr")   
11设置tr属性:set...(忘了这属性这单词)   
12rows[i]=tr//i可用rows.length代之   
13}   
14  
15\---------------------------------------------------------------   
16  
17innerHTML最块</td></tr></table>
Published At
Categories with Web编程
comments powered by Disqus