<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<STRONG><%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%></STRONG>
<html>
<head>
<script type="text/javascript">
<STRONG>function add(){ //添加子接口
var newSub = document.all.templete.cloneNode(true);
newSub.id = '';
newSub.style.display = "block";
//var elements = newSub.getElementsByTagName("INPUT");
//for(var i=0; i<elements.length; i++){
//elements[i].name = elements[i].name.replace(/\[\d*\]/, '['+index+']');
//}
alert("子接口个数:"+document.all.subs.childNodes.length);
document.all.subs.appendChild(newSub);
}
function remove(delLink){
document.all.subs.removeChild(delLink.parentNode.parentNode);
}</STRONG>
</script>
</head>
<body>
<STRONG><%= path %>
<%= basePath %></STRONG>
<br>
<STRONG>cloneNode()方法可创建指定节点的精确拷贝,(可以做一个模版 然后做一个隐藏域,点击按钮就添加一个模板),此方法可返回所复制的节点.
该方法将复制并返回调用它的节点的副本.如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点.否则,它只复制当前节点.
返回的节点不属于文档树,它的 parentNode 属性为 null.
当复制的是 Element 节点时,它的所有属性都将被复制.但要注意,当前节点上注册的事件监听器函数不会被复制.</STRONG>
<input type="button" value="添加子接口" onClick="add()"/>
<STRONG><div id="subs">
<%-- 子接口层 --%>
</div>
<%-- 子接口 HTML模板 开始 --%>
<div id="templete" style="display:none;">
<div>子接口信息
<a href="#" οnclick="remove(this)" style="font-size:12px;">删除</a>
</div>
<table>
<tr>
<td><input type="text" name="name"/></td>
</tr>
</table>
</div></STRONG>
<STRONG><%-- 子接口 HTML模板 结束 --%></STRONG>
************************************************************<br>
<STRONG><SPAN style="COLOR: #ff00ff"><table id="show" border="1">
<tr><th></th><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr id="signTR" >
<td>1.</td>
<td><input type="text" name="name"/></td>
<td>
<select name="sex" id="sex">
<option value="0" selected="selected">男</option>
<option value="1">女</option>
</select>
</td>
<td><input type="text" name="age""/></td>
</tr>
</table></SPAN></STRONG>
<input type="button" value="添加一人" οnclick="addhang()"/>
<script type="text/javascript">
<STRONG><SPAN style="COLOR: #ff00ff">i=1;
function addhang() {
var tableObject=new Object();
tableObject=document.getElementById("show");
var isneed=true;
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();
alert(td0.innerHTML);
alert(newTR.innerHTML);
alert(tableObject.innerHTML);
td0.innerHTML=(++i)+'.';
td1.innerHTML='<input type="text" name="username"/>';
var newSelect=document.getElementById("sex").cloneNode(true);
newSelect.id="sex"+i;
td2.appendChild(newSelect);
td3.innerHTML='<input type="text" name="age" οnchange="addhang()"/>';
}
}</SPAN></STRONG>
</script>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
