使用javascript动态添加或删除table的行或者列

第一种方法：使用insertRow添加行，使用insertCell添加单元格，再用innerHTML填充单元格。使用deleteRow删除行，代码如下：
Javascript代码：

1. function addRow() 
2.   { 
3.      var root = document.getElementById("tbody") 
4.      var allRows = root.getElementsByTagName('tr'); 
5.      var allCells = allRows[0].getElementsByTagName('td'); 
6.      var newRow = root.insertRow(); 
7.      var newCell0 = newRow.insertCell(); 
8.      var newCell1 = newRow.insertCell(); 
9.      var newCell2 = newRow.insertCell(); 
10.      var newCell3 = newRow.insertCell(); 
11.      newCell0.innerHTML = allCells[0].innerHTML; 
12.      newCell1.innerHTML = allCells[1].innerHTML; 
13.      newCell2.innerHTML = allCells[2].innerHTML; 
14.      newCell3.innerHTML = allCells[3].innerHTML; 
16.   } 
17.   function removeRow(r) 
18.   { 
19.     var root = r.parentNode; 
20.     root.deleteRow(r); 

HTML代码：

1. <table> 
2.   <tbody id="tbody"> 
3.     <tr> 
4.         <td><select><option>hello</option><option>hi</option></select></td> 
5.         <td><input type="text" value="enter you name here" /></td> 
6.         <td><input type="text" value="text2"/></td> 
7.         <td><input type="button" value="remove" onclick="removeRow(this.parentNode.parentNode)"/></td> 
8.     </tr> 
9.     </tbody> 
10.   </table> 
11.   <table><tr><td><input type="button" value="add" onclick="addRow()" /></td></tr></table> 

第二种方法：使用cloneNode方法(复制节点)和appendChild(附加子元素)，使用removeChild删除子元素，代码如下：

Javascript代码：

1. function addRow() 
2. { 
3.     var root = document.getElementById("tbody"); 
4.     var allRows = root.getElementsByTagName('tr'); 
5.     var cRow = allRows[0].cloneNode(true) 
6.     root.appendChild(cRow); 
7. } 
8. function removeRow(r) 
9. { 
10.     var root = r.parentNode; 
11.     var allRows = root.getElementsByTagName('tr') 
12.     if(allRows.length>1) 
13.         root.removeChild(r); 
14.     else 
15.         alert("only one row left, you not need to remove it."); 
16. } 

HTML代码：

1. <table border="0" cellspacing="0" cellpadding="0"> 
2.   <tbody id="tbody"> 
3.     <tr> 
4.       <td><input type="text" name="text1" /></td> 
5.       <td><input type="text" name="text2" /></td> 
6.       <td><select name="select"> 
7.         <option>item1</option> 
8.         <option>item2</option> 
9.         <option>item3</option> 
10.         <option>item4</option> 
11.         <option>item5</option> 
12.       </select></td> 
13.       <td><input type="button" value="Remove" onclick="removeRow(this.parentNode.parentNode)"></td> 
14.     </tr></tbody> 
15.   </table> 
16.   <input name="button" type="button" value="Add row" onclick="addRow(')"> 

以上代码IE7.0测试通过。其他浏览器未检测。