for循环生成行列问题

<script>
document.write("<table cellpadding=0 cellspacing=0 border=1>");
for(var i=0;i<999;i++){
document.write("<tr>");
for(var j=0;j<100;j++){
document.write('<td width=20  height=20 style="background-color: #f7f7f7">'+i+j+'</td>');
}
document.write("</tr>");
}
document.write("</table>");
</script>这样会很慢，有其他办法吗

解决方案 »

  1.   

    拼起来 然后一起 var str = [];
    str.push("<table cellpadding=0 cellspacing=0 border=1>");
    for(var i=0;i<999;i++){
    str.push("<tr>");
    for(var j=0;j<100;j++){
    str.push('<td width=20 height=20 style="background-color: #f7f7f7">'+i+j+'</td>');
    }
    str.push("</tr>");
    }
    str.push("</table>");
    document.write(str.join(''));
      

  2.   

    像楼主的方法只能在页面解析时生成,这样不是很方便吧我知道的目前有4种办法可以动态的生成:
    1.insertRow() insertCell()
    2.appendChild()
    3.innerHTML +=
    4.innerHTML array.join()
      

  3.   

    4种方法分析.
    第一种,最容易理解,容易操作,但是速度慢.特别是在ie中 速度不是一般的慢,大概比下面三种方法慢30倍甚至以上;
    第二种,在ie中速度是最快的,在其他浏览器中也非常快,但是操作极其繁琐;
    第三种,就是写<table></table> innerHTML是很高效的,但是由于'+='既需要序列化又需要解析,所以大大影响了速度.(p.s.Chrome中对+运算符进行了优化,基本上等同于第四种方法,突破了+=的魔咒)
    第四种,突破了第三种+=的魔咒
      

  4.   

    //动态创建表格
    var newTable=document.createElement("table");
    var newTbody=document.createElement("tbody"); newTable.setAttribute("border","1");
    //newTable.setAttribute("width","200");
    //newTable.setAttribute("height","500");
    newTable.setAttribute("align","center");
    for(var i=1;i<=trNum;i++){
    var row=document.createElement("tr");

    for(var j=1;j<=tdNum;j++){
    var cell=document.createElement("td");
    var textValue=document.createTextNode("第"+i+"行 第"+j+"列");
    cell.setAttribute("id","td"+j);
    cell.appendChild(textValue);
    row.appendChild(cell);
    }
    newTbody.appendChild(row);
    }
    newTable.appendChild(newTbody);
    var div=document.getElementById("table1");
    div.appendChild(newTable);
    }
      

  5.   

    <input type="button" value="创建表格" onclick="createTable();"/><BR>
    <div  id="table1">
    </div>
      

  6.   

    (非原创)转自 日积月累 (网址找不到了,从自己电脑里翻出来的)<html>
      <head>
       <title>test page</title>
       <script type='text/javascript'>
         <!--
       function createTable() {
           var t = document.createElement('table');
           for (var i = 0; i < 2000; i++) {
            var r = t.insertRow(0);
            for (var j = 0; j < 5; j++) {
             var c = r.insertCell(0);
             c.innerHTML = i + ',' + j;
            }
           }
           
           document.getElementById('table1').appendChild(t);
          t.setAttribute('border', '1');
       }
       
       function createTable2() {
           var t = document.createElement('table');
           var b = document.createElement('tbody');
           for (var i = 0; i < 2000; i++) {
            var r = document.createElement('tr');
            for (var j = 0; j < 5; j++) {
             var c = document.createElement('td');
             var m = document.createTextNode(i + ',' + j);
             c.appendChild(m);
             r.appendChild(c);
            }
            b.appendChild(r);
           }
           
           t.appendChild(b);
           document.getElementById('table1').appendChild(t);
          t.setAttribute('border', '1');
       }
       
       function createTable3() {
        var data = '';
        
        data += '<table border=1><tbody>';
           for (var i = 0; i < 2000; i++) {
            data += '<tr>';
            for (var j = 0; j < 5; j++) {
             data += '<td>' + i + ',' + j + '</td>';
            }
            data += '</tr>';
           }
           data += '</tbody><table>';
           
           document.getElementById('table1').innerHTML = data;
       } 
       function createTable4() {
        var data = new Array();
        
        data.push('<table border=1><tbody>');
           for (var i = 0; i < 2000; i++) {
            data.push('<tr>');
            for (var j = 0; j < 5; j++) {
             data.push('<td>' + i + ',' + j + '</td>');
            }
            data.push('</tr>');
           }
           data.push('</tbody><table>');
           
           document.getElementById('table1').innerHTML = data.join('');
       }    function showFunctionRunTime(f) {
        var t1 = new Date();
        f();
        var t2 = new Date();
        alert(t2 - t1);
       }
         //-->
       </script>
      </head>
     <body>
      <div id="table1" style="border: 1px solid black">
      </div>   <script>
       showFunctionRunTime(createTable);
       showFunctionRunTime(createTable2);
       showFunctionRunTime(createTable3);
       showFunctionRunTime(createTable4);
      </script>
     </body>
    </html> 
      

  7.   

    showFunctionRunTime(createTable4);
    不错，谢谢