??????在web頁(yè)面中經(jīng)常需要出現(xiàn)許多完全一樣的控件項(xiàng)，而需要控件的多少完全由用戶輸入量決定，在js中可以很容易的實(shí)現(xiàn)這點(diǎn)，效果展示大多時(shí)候比語(yǔ)言來(lái)得更有魅力。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<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" onchange="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="%">請(qǐng)選擇性別</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>