您的位置：首页 > Web前端 > JavaScript

使用Javascript动态创建表格，不同的方法，巨大的运行时间差异！

2012-11-09 18:10 896 查看
目标：生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号

方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML属性进行填充。

方法二：使用createElement生成表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充。

方法三：拼接表格innerHTML属性的字符串，使用字符串 += 操作符链接字符串

方法四：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。

运行时间比较(毫秒):

IE7：124825,1344，2688，313

360：117718，1328，3125，312

傲游：107437，1343，1625，282

火狐：813，179，215，182

谷歌：185，47，134，109

程序代码如下：

<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js 动态创建表格
相关文章推荐
新的分享
章节导航