js動態生成表格
生成一個2000*5的表格，每一個單元格的內容是行號+逗號+列號javascript
方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，單元格的內容使用innerHTML進行填充html
方法二：使用 createElement生成表格，使用createElement方法生成行列，單元格的內容使用createTextNode方法填充java
方法三：拼接表格innerHTML屬性的字符串，使用字符串+=操做符連接字符串數組
方法四：拼接表格innerHTML屬性的字符串，各個字符串追加數組裏面，最後調用數組的join方法生成目標字符串。app
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>