使用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);
}
{
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 >
< 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.");
}
{
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(')" >
< 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测试通过。其他浏览器未检测。