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<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>