生成一個2000*5的表格,每個單元格的內(nèi)容是行號+逗號+列號 
方法一:使用createElement生成表格,使用insertRow和insertCell方法生成行列,單元格的內(nèi)容使用innerHTML屬性進行填充。 
方法二:使用createElement生成表格,使用CreateElement方法生成行列,單元格的內(nèi)容使用了createTextNode方法填充。 
方法三:拼接表格innerHTML屬性的字符串,使用字符串 += 操作符鏈接字符串 
方法四:拼接表格innerHTML屬性的字符串,各個字符串追加數(shù)組里面,最后調(diào)用數(shù)組的join方法生成目標字符串。 
運行時間比較: 
方法 運行時間(ms) 
方法一 93037 
方法二 3341 
方法三 2795 
方法四 500 
具體的程序如下: 
 
<html> 
<head> 
<title>test page</title> 
<script type='text/javascript'> 
<!-- 
function createTable() { 
var t = document.createElement('table'); 
for (var i = 0; i < 2000; i++) { 
var r = t.insertRow(); 
for (var j = 0; j < 5; j++) { 
var c = r.insertCell(); 
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> 
 
1、inserRow()和insertCell()函數(shù) 
  insertRow()函數(shù)可以帶參數(shù),形式如下: 
  insertRow(index) 
  這個函數(shù)將新行添加到index的那一行前,比如insertRow(0),是將新行添加到第一行之前。默認的insertRow()函數(shù)相當于insertRow(-1),將新行添加到表的最后。 
  insertCell()和insertRow的用法相同。 
  2、動態(tài)設(shè)置屬性和事件 
  上面的innerHTML和innerText都是列的屬性。 
  innerText是添加到<tb></tb>之間的文本,innerHTML是添加到<tb></tb>之間的HTML代碼 
  設(shè)置其他屬性也是用同樣的方式,比如,設(shè)置行背景色 
  tr.bgColor = 'red'; 
設(shè)置colspan屬性 
td.colSpan = 3; 
   
  設(shè)置事件也一樣,需要簡單說明一點。 
  比如,我要讓點擊新加行的時候執(zhí)行一個自己定義的函數(shù) newClick,newClick函數(shù)如下: 
  function newClick(){ 
   alert("這是新添加的行"); 
  } 
  對onclick事件設(shè)置這個函數(shù)的代碼如下: 
  tr.onclick = newClick; 
  這里需要主義的是,=后面的部分必須是函數(shù)名,而且不能帶引號, 
  newTr.onclick = newClick(); 
  newTr.onclick = 'newClick'; 
  newTr.onclick = "newClick"; 
  上面的寫法都是錯誤的。 
  下面的寫法,也是正確的 
  newTr.onclick = function newClick(){ 
   alert("這是新添加的行"); 
  } 
動態(tài)刪除表格 
方法1: 
 
<table id=mxh border=1> 
<tr> 
<td>第1行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">刪除本行</td> 
</tr> 
<tr> 
<td>第2行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">刪除本行</td> 
</tr> 
</table> 
<script> 
function deleteRow (tableID, rowIndex) { 
var table =document.all[tableID] 
table.deleteRow(rowIndex); 
} 
function getRowNum(tableID){ 
var tab = document.all[tableID] 
//表格行數(shù) 
var rows = tab.rows.length ; 
//表格列數(shù) 
var cells = tab.rows.item(0).cells.length ; 
} 
</script> 
 
方法2: 
 
<table id=mxh border=1> 
<tr> 
<td>第1行</td><td onclick="deleteRow(this.parentElement)">刪除本行</td> 
</tr> 
<tr> 
<td>第2行</td><td onclick="deleteRow(this.parentElement)">刪除本行</td> 
</tr> 
</table> 
<script> 
function deleteRow (obj) { 
obj.parentElement.removeChild(obj); 
} 
</script>