高手帮忙啊！关于动态创建表格效率问题，大家有什么高招？

高手帮忙啊！关于动态创建表格效率问题，大家有什么高招？可以让效率更高一些啊。我想每隔5秒钟创建大约500（上限）行的表格，每次创建完之后删除多余的行（保留800行）
我下面的方法效率非常不好，每次创建时占用cpu  50%左右；
大家看看有没有什么高效率的方法来动态创建、删除表格的行；下面是源码：<html>
<head>
<script>
   var flag=0;
   var number=300;
   var num=0;
   function onLoad(){
num = num + number;
for(var i=0; i<number ; i++){
                        var newTr = aa.insertRow(1);
                        var newTd0 = newTr.insertCell();
                        var newTd1 = newTr.insertCell();
                        var newTd2 = newTr.insertCell();
                        var newTd3 = newTr.insertCell();
                        var newTd4 = newTr.insertCell();
                        var newTd5 = newTr.insertCell();;
           
                            newTd0.innerText = i; 
                            newTd1.innerText = i; 
                            newTd2.innerText = i;                                            
newTd3.innerText = i;                    
                            newTd4.innerText = i;  
                            newTd5.innerText = i;                   
                    }
number ++;
                    if(num>500){
                        for(var j = 0;j <num-500;j++){
                            aa.deleteRow();
                        }
                        num = 500;
                    }
 flag++;
 setTimeout("onLoad()",5000);
}
</script>
</head>
<body >
<table id="a" name="b" border="1">
        <tr>
<input type="" value="提交" onclick="onLoad()" />
</tr>
</table>
<table id="aa" name="b" border="1">
<TR bgcolor="#dee8ed"><TH>事项来源</TH><TH>事项内容</TH><TH>事项类型</TH><TH>发生时间</TH><TH>SOE时间</TH><TH>事项级别</TH></TR>
</table>
         
</body>
</html>

解决方案 »

  1.   

    减少DOM的操作次数
    建议:新建一文档碎片document.createDocumentFragment
    所有的表格都循环添加在文档碎片上,
    最后一次修改DOM
      

  2.   

    本人还用了另一种方法
    效率也是不高
    <html>
    <head>
    <script type='text/javascript' src='jquery.js'></script>
    <script>
       var flag=0;
       var number=300;
       var num=0;
       function onLoad(){
    var table = $("#aa");
     var eletable = table.get(0);
      var str = new String();
     for(var i=0; i<number ; i++){
    str += "<tr>";
    for(var j=0; j<6; j++){
    str += "<td>";
    str += "number=" + (number) + "&nbsp;" + "falg=" + flag;
    str += "</td>";
            }
        str += "</tr>";
                }
     var tbody = table.eq(0);
     tbody.prepend(str);
     var trs = tbody.children().eq(0).children();   
     if(trs.length>500){
     alert(trs.length)
     for(var k=3;k<trs.length;k++)
     {
        trs.remove(k);   // 这句有错误
     }
     } 
     flag++;
     setTimeout("onLoad()",5000);
    }
    </script>
    </head>
    <body >
    <table id="a" name="b" border="1">
            <tr>
    <input type="" value="提交" onclick="onLoad()" />
    </tr>
    </table>
    <table id="aa" name="b" border="1">
    <TR bgcolor="#dee8ed"><TH>事项来源</TH><TH>事项内容</TH><TH>事项类型</TH><TH>发生时间</TH><TH>SOE时间</TH><TH>事项级别</TH></TR>
    </table>
             
    </body>
    </html>
      

  3.   

    顶~~~~clone的用法很简单，写一个tr，比如<tr id="tplRow"> <td id="c1"></td> <td id="c2"></td></tr>
    <script laguage="javascript" type="text/javascript">
    var tpl=document.getElementById(tplRow);
    var newRow=tpl.cloneNode(true); //newRow会得到与tplRow完全一样的结构，包括样式等等
    //然后在把newRow加到表格中以后，就可以通过newRow.cells["c1"].innerHTML来设置第一个单元格的值了
    //或者未添加到表格之前，可以用newRow.cells[0].innerHTML
    </script>
      

  4.   

    呃
    var tpl=document.getElementById(tplRow);
    少个引号
    var tpl=document.getElementById("tplRow");