通过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