jinwei233/动态创建表格.html

## 动态创建表格.html
<html>
  <head>
   <title>test page</title>
   <script type='text/javascript'>
   <!--
方法	运行时间(ms)
方法一	93037
方法二	3341
方法三	2795
方法四	500
   -->

   <!--
   function createTable() {
       var t = document.createElement('table');
       for (var i = 0; i < 2000; i++) {
        var r = t.insertRow(0);
        for (var j = 0; j < 5; j++) {
         var c = r.insertCell(0);
         c.innerHTML = i + ',' + j;
        }
       }

       document.getElementById('table1').appendChild(t);
      t.setAttribute('border', '1');
   }

   function createTable2() {
       var t = document.createElement('table');
       var b = document.createElement('tbody');
       for (var i = 0; i < 2000; i++) {
        var r = document.createElement('tr');
        for (var j = 0; j < 5; j++) {
         var c = document.createElement('td');
         var m = document.createTextNode(i + ',' + j);
         c.appendChild(m);
         r.appendChild(c);
        }
        b.appendChild(r);
       }

       t.appendChild(b);
       document.getElementById('table1').appendChild(t);
      t.setAttribute('border', '1');
   }

   function createTable3() {
    var data = '';

    data += '<table border=1><tbody>';
       for (var i = 0; i < 2000; i++) {
        data += '<tr>';
        for (var j = 0; j < 5; j++) {
         data += '<td>' + i + ',' + j + '</td>';
        }
        data += '</tr>';
       }
       data += '</tbody><table>';

       document.getElementById('table1').innerHTML = data;
   }
   function createTable4() {
    var data = new Array();

    data.push('<table border=1><tbody>');
       for (var i = 0; i < 2000; i++) {
        data.push('<tr>');
        for (var j = 0; j < 5; j++) {
         data.push('<td>' + i + ',' + j + '</td>');
        }
        data.push('</tr>');
       }
       data.push('</tbody><table>');

       document.getElementById('table1').innerHTML = data.join('');
   }

   function showFunctionRunTime(f) {
    var t1 = new Date();
    f();
    var t2 = new Date();
    alert(t2 - t1);
   }
     //-->
   </script>
  </head>
 <body>
  <div id="table1" style="border: 1px solid black">
  </div>

  <script>
   showFunctionRunTime(createTable);
   showFunctionRunTime(createTable2);
   showFunctionRunTime(createTable3);
   showFunctionRunTime(createTable4);
  </script>
 </body>
</html>
	<html>
	<head>
	<title>test page</title>
	<script type='text/javascript'>
	<!--
	方法运行时间(ms)
	方法一 93037
	方法二 3341
	方法三 2795
	方法四 500
	-->

	<!--
	function createTable() {
	var t = document.createElement('table');
	for (var i = 0; i < 2000; i++) {
	var r = t.insertRow(0);
	for (var j = 0; j < 5; j++) {
	var c = r.insertCell(0);
	c.innerHTML = i + ',' + j;
	}
	}

	document.getElementById('table1').appendChild(t);
	t.setAttribute('border', '1');
	}

	function createTable2() {
	var t = document.createElement('table');
	var b = document.createElement('tbody');
	for (var i = 0; i < 2000; i++) {
	var r = document.createElement('tr');
	for (var j = 0; j < 5; j++) {
	var c = document.createElement('td');
	var m = document.createTextNode(i + ',' + j);
	c.appendChild(m);
	r.appendChild(c);
	}
	b.appendChild(r);
	}

	t.appendChild(b);
	document.getElementById('table1').appendChild(t);
	t.setAttribute('border', '1');
	}

	function createTable3() {
	var data = '';

	data += '<table border=1><tbody>';
	for (var i = 0; i < 2000; i++) {
	data += '<tr>';
	for (var j = 0; j < 5; j++) {
	data += '<td>' + i + ',' + j + '</td>';
	}
	data += '</tr>';
	}
	data += '</tbody><table>';

	document.getElementById('table1').innerHTML = data;
	}
	function createTable4() {
	var data = new Array();

	data.push('<table border=1><tbody>');
	for (var i = 0; i < 2000; i++) {
	data.push('<tr>');
	for (var j = 0; j < 5; j++) {
	data.push('<td>' + i + ',' + j + '</td>');
	}
	data.push('</tr>');
	}
	data.push('</tbody><table>');

	document.getElementById('table1').innerHTML = data.join('');
	}

	function showFunctionRunTime(f) {
	var t1 = new Date();
	f();
	var t2 = new Date();
	alert(t2 - t1);
	}
	//-->
	</script>
	</head>
	<body>
	<div id="table1" style="border: 1px solid black">
	</div>

	<script>
	showFunctionRunTime(createTable);
	showFunctionRunTime(createTable2);
	showFunctionRunTime(createTable3);
	showFunctionRunTime(createTable4);
	</script>
	</body>
	</html>