JavaScript cloneNode的使用

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 控件cloneNode（）方法的使用 </ title >
< script language ="javascript" >
i = 1 ;
function AddRow()
{
var tableObject = new Object();

var isneed = true ;

tableObject = document.getElementById( " CloneNodeShow " );
// 判断是否有必要添加新的输入行
for ( var j = 0 ;j < tableObject.all.tags( " input " ).length;j ++ )
{
var inputs = tableObject.all.tags( " input " )[j];
if (inputs.type == " text " && inputs.value == "" )
{
isneed = false ;
}
}
if (isneed)
{
// 添加一行
var newTR = tableObject.insertRow();
var td0 = newTR.insertCell();
var td1 = newTR.insertCell();
var td2 = newTR.insertCell();
var td3 = newTR.insertCell();

td0.innerHTML = ( ++ i) + ' . ' ;
td1.innerHTML = ' <input type="text" name="username"/> ' ;
// true表示深度克隆
var newSelect = document.getElementById( " sexType " ).cloneNode( true );
newSelect.id = " sexType " + i;
td2.appendChild(newSelect);
td3.innerHTML = ' <input type="text" name="age" οnchange="AddRow()"/> ' ;
}
}
</ script >
</ head >
< body >
< form >
< table id ="CloneNodeShow" border ="2" bordercolor ="#000000" >
< tr >< th ></ th >< th > 姓名 </ th >< th > 性别 </ th >< th > 年龄 </ th ></ tr >
< tr id ="signTR" >
< td > 1. </ td >
< td >< input type ="text" name ="username" /></ td >
< td >
< select name ="sexType" id ="sexType" >
< option value ="%" > 请选择性别 </ option >
< option value ="0" > 男 </ option >
< option value ="1" > 女 </ option >
</ select >
</ td >
< td >< input type ="text" name ="age" onchange ="AddRow()" /></ td >
</ tr >
</ table >
</ form >
</ body >
</ html >

 

 

 

转载于:https://www.cnblogs.com/gaoyoubo/archive/2010/05/25/1965052.html