免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
› 论坛 › 程序设计 › Web开发 › JS动态创建表格(转)
最近访问板块 发新帖
查看: 1686 | 回复: 1
打印 上一主题 下一主题

JS动态创建表格(转) [复制链接]

中关村村草

论坛徽章:
0
跳转到指定楼层
1楼 [收藏(0)] [报告]
发表于 2012-01-07 10:55 |只看该作者 |倒序浏览
JS动态创建表格(转)





目标：生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号 (转别人的)

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

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

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

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

Html代码
  1. <html>  
  2.   <head>  
  3.    <title>test page</title>  
  4.    <script type='text/javascript'>  
  5.      <!--   
  6.    function createTable() {   
  7.        var t = document.createElement('table');   
  8.        for (var i = 0; i < 2000; i++) {   
  9.         var r = t.insertRow();   
  10.         for (var j = 0; j < 5; j++) {   
  11.          var c = r.insertCell();   
  12.          c.innerHTML = i + ',' + j;   
  13.         }   
  14.        }   
  15.          
  16.        document.getElementById('table1').appendChild(t);   
  17.       t.setAttribute('border', '1');   
  18.    }   
  19.       
  20.    function createTable2() {   
  21.        var t = document.createElement('table');   
  22.        var b = document.createElement('tbody');   
  23.        for (var i = 0; i < 2000; i++) {   
  24.         var r = document.createElement('tr');   
  25.         for (var j = 0; j < 5; j++) {   
  26.          var c = document.createElement('td');   
  27.          var m = document.createTextNode(i + ',' + j);   
  28.          c.appendChild(m);   
  29.          r.appendChild(c);   
  30.         }   
  31.         b.appendChild(r);   
  32.        }   
  33.          
  34.        t.appendChild(b);   
  35.        document.getElementById('table1').appendChild(t);   
  36.       t.setAttribute('border', '1');   
  37.    }   
  38.       
  39.    function createTable3() {   
  40.     var data = '';   
  41.       
  42.     data += '<table border=1><tbody>';   
  43.        for (var i = 0; i < 2000; i++) {   
  44.         data += '<tr>';   
  45.         for (var j = 0; j < 5; j++) {   
  46.          data += '<td>' + i + ',' + j + '</td>';   
  47.         }   
  48.         data += '</tr>';   
  49.        }   
  50.        data += '</tbody><table>';   
  51.          
  52.        document.getElementById('table1').innerHTML = data;   
  53.    }   
  54.   
  55.    function createTable4() {   
  56.     var data = new Array();   
  57.       
  58.     data.push('<table border=1><tbody>');   
  59.        for (var i = 0; i < 2000; i++) {   
  60.         data.push('<tr>');   
  61.         for (var j = 0; j < 5; j++) {   
  62.          data.push('<td>' + i + ',' + j + '</td>');   
  63.         }   
  64.         data.push('</tr>');   
  65.        }   
  66.        data.push('</tbody><table>');   
  67.          
  68.        document.getElementById('table1').innerHTML = data.join('');   
  69.    }   
  70.   
  71.    function showFunctionRunTime(f) {   
  72.     var t1 = new Date();   
  73.     f();   
  74.     var t2 = new Date();   
  75.     alert(t2 - t1);   
  76.    }   
  77.      //-->  
  78.    </script>  
  79.   </head>  
  80. <body>  
  81.   <div id="table1" style="border: 1px solid black">  
  82.   </div>  
  83.   
  84.   <script>  
  85.       
  86.    showFunctionRunTime(createTable2);   
  87.   /*   
  88.    showFunctionRunTime(createTable);   
  89.    showFunctionRunTime(createTable3);   
  90.    showFunctionRunTime(createTable4);*/   
  91.   </script>  
  92. </body>  
  93. </html>   

  95. <html>
  96.   <head>
  97.    <title>test page</title>
  98.    <script type='text/javascript'>
  99.      <!--
  100.    function createTable() {
  101.        var t = document.createElement('table');
  102.        for (var i = 0; i < 2000; i++) {
  103.         var r = t.insertRow();
  104.         for (var j = 0; j < 5; j++) {
  105.          var c = r.insertCell();
  106.          c.innerHTML = i + ',' + j;
  107.         }
  108.        }
  109.       
  110.        document.getElementById('table1').appendChild(t);
  111.       t.setAttribute('border', '1');
  112.    }
  113.    
  114.    function createTable2() {
  115.        var t = document.createElement('table');
  116.        var b = document.createElement('tbody');
  117.        for (var i = 0; i < 2000; i++) {
  118.         var r = document.createElement('tr');
  119.         for (var j = 0; j < 5; j++) {
  120.          var c = document.createElement('td');
  121.          var m = document.createTextNode(i + ',' + j);
  122.          c.appendChild(m);
  123.          r.appendChild(c);
  124.         }
  125.         b.appendChild(r);
  126.        }
  127.       
  128.        t.appendChild(b);
  129.        document.getElementById('table1').appendChild(t);
  130.       t.setAttribute('border', '1');
  131.    }
  132.    
  133.    function createTable3() {
  134.     var data = '';
  135.    
  136.     data += '<table border=1><tbody>';
  137.        for (var i = 0; i < 2000; i++) {
  138.         data += '<tr>';
  139.         for (var j = 0; j < 5; j++) {
  140.          data += '<td>' + i + ',' + j + '</td>';
  141.         }
  142.         data += '</tr>';
  143.        }
  144.        data += '</tbody><table>';
  145.       
  146.        document.getElementById('table1').innerHTML = data;
  147.    }

  149.    function createTable4() {
  150.     var data = new Array();
  151.    
  152.     data.push('<table border=1><tbody>');
  153.        for (var i = 0; i < 2000; i++) {
  154.         data.push('<tr>');
  155.         for (var j = 0; j < 5; j++) {
  156.          data.push('<td>' + i + ',' + j + '</td>');
  157.         }
  158.         data.push('</tr>');
  159.        }
  160.        data.push('</tbody><table>');
  161.       
  162.        document.getElementById('table1').innerHTML = data.join('');
  163.    }

  165.    function showFunctionRunTime(f) {
  166.     var t1 = new Date();
  167.     f();
  168.     var t2 = new Date();
  169.     alert(t2 - t1);
  170.    }
  171.      //-->
  172.    </script>
  173.   </head>
  174. <body>
  175.   <div id="table1" style="border: 1px solid black">
  176.   </div>

  178.   <script>
  179.    
  180.    showFunctionRunTime(createTable2);
  181.   /*
  182.    showFunctionRunTime(createTable);
  183.    showFunctionRunTime(createTable3);
  184.    showFunctionRunTime(createTable4);*/
  185.   </script>
  186. </body>
  187. </html>
复制代码
参考：
http://www.cnblogs.com/huhaoaixl/archive/2009/03/17/1414752.html
蓝猫淘气啦啦

论坛徽章:
0
2楼 [报告]
发表于 2012-01-07 10:56 |只看该作者
谢谢分享
实战分享：从技术角度谈机器学习入门| 【大话IT】RadonDB低门槛向MySQL集群下战书 | ChinaUnix打赏功能已上线！ | 新一代分布式关系型数据库RadonDB知多少？
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号：11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们：huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP