通过Javascript运用四种方法动态创建表格，并测试性能优劣[复习]
目标：生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号
方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML属性进行填充。
方法二：使用createElement生成表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充。
方法三：拼接表格innerHTML属性的字符串，使用字符串 += 操作符链接字符串
方法四：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>通过Javascript运用四种方法动态创建表格，并测试性能优劣</title>
6 <script type='text/javascript'>
7 <!--
8 function createTable(){
9 var t = document.createElement('table');
10 for (var i = 0; i < 2000; i++) {
11 var r = t.insertRow();
12 for (var j = 0; j < 5; j++) {
13 var c = r.insertCell();
14 c.innerHTML = i + ',' + j;
15 }
16 }
17 document.getElementById('table1').appendChild(t);
18 t.setAttribute('border', '1');
19 }
20
21 function createTable2(){
22 var t = document.createElement('table');
23 var b = document.createElement('tbody');
24 for (var i = 0; i < 2000; i++) {
25 var r = document.createElement('tr');
26 for (var j = 0; j < 5; j++) {
27 var c = document.createElement('td');
28 var m = document.createTextNode(i + ',' + j);
29 c.appendChild(m);
30 r.appendChild(c);
31 }
32 b.appendChild(r);
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 data += '<table border=1><tbody>';
42 for (var i = 0; i < 2000; i++) {
43 data += '<tr>';
44 for (var j = 0; j < 5; j++) {
45 data += '<td>' + i + ',' + j + '</td>';
46 }
47 data += '</tr>';
48 }
49 data += '</tbody><table>';
50 document.getElementById('table1').innerHTML = data;
51 }
52
53 function createTable4(){
54 var data = new Array();
55 data.push('<table border=1><tbody>');
56 for (var i = 0; i < 2000; i++){
57 data.push('<tr>');
58 for (var j = 0; j < 5; j++){
59 data.push('<td>' + i + ',' + j + '</td>');
60 }
61 data.push('</tr>');
62 }
63 data.push('</tbody><table>');
64 document.getElementById('table1').innerHTML = data.join('');
65 }
66
67 function showFunctionRunTime(f){
68 var t1 = new Date();
69 f();
70 var t2 = new Date();
71 alert(t2 - t1);
72 }
73 //-->
74 </script>
75 </head>
76 <body>
77 </body>
78 </html>
79
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>通过Javascript运用四种方法动态创建表格，并测试性能优劣</title>
6 <script type='text/javascript'>
7 <!--
8 function createTable(){
9 var t = document.createElement('table');
10 for (var i = 0; i < 2000; i++) {
11 var r = t.insertRow();
12 for (var j = 0; j < 5; j++) {
13 var c = r.insertCell();
14 c.innerHTML = i + ',' + j;
15 }
16 }
17 document.getElementById('table1').appendChild(t);
18 t.setAttribute('border', '1');
19 }
20
21 function createTable2(){
22 var t = document.createElement('table');
23 var b = document.createElement('tbody');
24 for (var i = 0; i < 2000; i++) {
25 var r = document.createElement('tr');
26 for (var j = 0; j < 5; j++) {
27 var c = document.createElement('td');
28 var m = document.createTextNode(i + ',' + j);
29 c.appendChild(m);
30 r.appendChild(c);
31 }
32 b.appendChild(r);
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 data += '<table border=1><tbody>';
42 for (var i = 0; i < 2000; i++) {
43 data += '<tr>';
44 for (var j = 0; j < 5; j++) {
45 data += '<td>' + i + ',' + j + '</td>';
46 }
47 data += '</tr>';
48 }
49 data += '</tbody><table>';
50 document.getElementById('table1').innerHTML = data;
51 }
52
53 function createTable4(){
54 var data = new Array();
55 data.push('<table border=1><tbody>');
56 for (var i = 0; i < 2000; i++){
57 data.push('<tr>');
58 for (var j = 0; j < 5; j++){
59 data.push('<td>' + i + ',' + j + '</td>');
60 }
61 data.push('</tr>');
62 }
63 data.push('</tbody><table>');
64 document.getElementById('table1').innerHTML = data.join('');
65 }
66
67 function showFunctionRunTime(f){
68 var t1 = new Date();
69 f();
70 var t2 = new Date();
71 alert(t2 - t1);
72 }
73 //-->
74 </script>
75 </head>
76 <body>
77 </body>
78 </html>
79
