js动态生成表格
生成一个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>
