zoukankan      html  css  js  c++  java
  • js 拼接table 的方法

    <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();
            for (var j = 0; j < 5; j++) {
             var c = r.insertCell();
             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>

    原文连接: http://blog.51cto.com/jeoff/225188

  • 相关阅读:
    14. Longest Common Prefix[E]最长公共前缀
    13. Roman to Integer[E]罗马数字转整数
    12. Integer to Roman[M]整数转罗马数字
    11. Container With Most Water[M]盛最多水的容器
    10. Regular Expression Matching[H]正则表达式匹配
    清除浮動,父類塌陷解決
    html 定位
    微信支付这个坑,终于过了
    浮动
    盒子模型高级应用
  • 原文地址:https://www.cnblogs.com/adouwt/p/8110001.html
Copyright © 2011-2022 走看看