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

 

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

function  addRow()
   {
     var root = document.getElementById("tbody")
     var allRows = root.getElementsByTagName('tr');
     var allCells = allRows[0].getElementsByTagName('td');
     var newRow = root.insertRow();
     var newCell0 = newRow.insertCell();
     var newCell1 = newRow.insertCell();
     var newCell2 = newRow.insertCell();
     var newCell3 = newRow.insertCell();
     newCell0.innerHTML = allCells[0].innerHTML;
     newCell1.innerHTML = allCells[1].innerHTML;
     newCell2.innerHTML = allCells[2].innerHTML;
     newCell3.innerHTML = allCells[3].innerHTML;

  }
   function  removeRow(r)
   {
    var root = r.parentNode;
    root.deleteRow(r);
  }

HTML代码：

< table >
   < tbody  id ="tbody" >
     < tr >
         < td >< select >< option > hello </ option >< option > hi </ option ></ select ></ td >
         < td >< input  type ="text"  value ="enter you name here"   /></ td >
         < td >< input  type ="text"  value ="text2" /></ td >
         < td >< input  type ="button"  value ="remove"  onclick ="removeRow(this.parentNode.parentNode)" /></ td >
     </ tr >
     </ tbody >
   </ table >
   < table >< tr >< td >< input  type ="button"  value ="add"  onclick ="addRow()"   /></ td ></ tr ></ table >

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

Javascript代码：

function  addRow()
{ 
    var root = document.getElementById("tbody");
    var allRows = root.getElementsByTagName('tr');
    var cRow = allRows[0].cloneNode(true)
    root.appendChild(cRow);
}  
function  removeRow(r)
{
    var root = r.parentNode;
    var allRows = root.getElementsByTagName('tr')
    if(allRows.length>1)
        root.removeChild(r);
    else
        alert("only one row left, you not need to remove it.");
}

HTML代码：

< table  border ="0"  cellspacing ="0"  cellpadding ="0" >  
   < tbody  id ="tbody" >
     < tr >  
       < td >< input  type ="text"  name ="text1"   /></ td >  
       < td >< input  type ="text"  name ="text2"   /></ td >  
       < td >< select  name ="select" >  
         < option > item1 </ option >  
         < option > item2 </ option >  
         < option > item3 </ option >  
         < option > item4 </ option >  
         < option > item5 </ option >
       </ select ></ td >
       < td >< input  type ="button"  value ="Remove"  onclick ="removeRow(this.parentNode.parentNode)" ></ td >
     </ tr ></ tbody >
   </ table >
   < input  name ="button"  type ="button"  value ="Add row"  onclick ="addRow(')" >

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