js动态生成表格

最新推荐文章于 2022-04-09 22:36:28 发布

weixin_30268071

最新推荐文章于 2022-04-09 22:36:28 发布

阅读量48

点赞数

原文链接：http://www.cnblogs.com/xiaoqun-07-com/p/3361406.html

版权

生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号

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

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

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

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

 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    showFunctionRunTime(createTable);
86    showFunctionRunTime(createTable2);
87    showFunctionRunTime(createTable3);
88    showFunctionRunTime(createTable4);
89   </script>
90  </body>
91 </html>

转载于:https://www.cnblogs.com/xiaoqun-07-com/p/3361406.html

weixin_30268071

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js动态生成表格

生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML进行填充方法二：使用 createElement生成表格，使用createElement方法生成行列，单元格的内容使用createTextNode方法填充方法三：拼接表格inn...
复制链接

扫一扫