js中cloneNode()的使用
js中cloneNode()的使用
在web页面中经常需要出现许多完全一样的控件项，而需要控件的多少完全由用户输入量决定，在js中可以很容易的实现这点，效果展示大多时候比语言来得更有魅力。
<!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" 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="%">请选择性别</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>