最近在项目中做的一个表格的操作(DIV添加和删除表格)感觉还蛮好用的，与大家分享下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新增客户资料</title>
<script type="text/javascript">
function addentityss(divname){//添加的方法
var divchildclone = document.getElementById(divname).firstChild.cloneNode(true);
var tagname = divname + "s";
if (divname != "coloader") {
document.getElementById(tagname).appendChild(divchildclone);
} else {
if (coloaders.childNodes.length == 0) {
document.getElementById(tagname).appendChild(divchildclone);
}
}
document.getElementById(tagname).style.display = "";
}
function addAddress(){//调用添加的方法
addentityss("divadd");
}
function addPerson(){//用户输入添加的个数
var id = document.getElementById("numId").value;
if (id == ""){
alert("请输入要添加的联络人数量！");
return;
} else if (isNaN(id)){
alert("您输入的联络人数量不是数字！");
return;
} else if (id < 1 || id > 9){
alert("添加的联络人数量范围是 1 至 9 ！");
return;
} else {
for (var i=0;i<id;i++){//循环添加
addentityss("divperson");
}
}
}
function deletethis(obj,divname){//checkbox选择删除
var flg=confirm("确定要删除这行记录？");
if(flg==1){
var nodes=obj.parentNode.parentNode.parentNode.parentNode;
var node=nodes.parentNode;
var divid=node.getAttribute("id");
if(divid=="bruce"){//指定的ID名称(可选)
document.getElementById("bruce").removeChild(nodes);
}else{
document.getElementById(divname).removeChild(nodes);
}
}
obj.checked=false;
return;
}
</script>
</head>
<body>
<center>
<h2>新增客户资料</h2>
</center>
<table width="766" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table>
<tr>
<td>
删除<input type="checkbox" name="addr" disabled="true"/>
</td>
<td>地址
<input name="textfield342" type="text" size="5" />
</td>
<td> </td>
<td>种类
<select name="select">
<option>公司</option>
<option>客户</option>
<option>仓库</option>
<option>门市</option>
<option>其它</option>
</select>
</td>
</tr>
<tr>
<td align="right">英文</td>
<td><textarea name="textfield322" cols="35" rows="5"></textarea></td>
<td align="right">中文 </td>
<td><textarea name="textarea" cols="35" rows="5"></textarea></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><!-- 注意：此处为DIV添加的位置 -->
<div id="divadds"></div>
</td>
</tr>
<tr>
<td colspan="10" align="right">
<input type="button" name="button" value="加地址" onclick="addAddress();"/>
</td>
</tr>
</table>
<br/>
<table width="766" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table>
<tr>
<td>
删除<input type="checkbox" name="" id="" value="" disabled="true"/>
</td>
<td>地址</td>
<td>部门</td>
<td>联络人(英文)</td>
<td>联络人(中文)</td>
<td>电邮</td>
</tr>
<tr>
<td></td>
<td><input name="textfield34" type="text" size="15" /></td>
<td><input name="textfield35" type="text" size="15" /></td>
<td><input name="textfield362" type="text" size="15" /></td>
<td><input name="textfield36" type="text" size="15" /></td>
<td><input name="textfield37" type="text" size="15" /></td>
</tr>
<tr>
<td></td>
<td>活动电话</td>
<td>固定电话</td>
<td>内线</td>
<td>FAX</td>
<td>备注</td>
<td></td>
</tr>
<tr>
<td></td>
<td><input name="textfield38" type="text" size="15" /></td>
<td><input name="textfield39" type="text" size="15" /></td>
<td><input name="textfield310" type="text" size="15" /></td>
<td><input name="textfield311" type="text" size="15" /></td>
<td><input name="textfield312" type="text" size="15" /></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><!-- 注意：此处为DIV添加的位置 -->
<div id="divpersons"></div>
</td>
</tr>
</table>
<table width="766" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td> </td></tr>
<tr>
<td align="right">
<input type="text" name="num" id="numId" size="2" value="1" maxlength="2"/>
<input type="button" name="button" value="加联络人" onclick="addPerson();"/>
</td>
</tr>
</table>
<p> </p>
<!-- 复制的DIV -->
<div id="divadd" style="display:none">
<table>
<tr>
<td>
删除<input type="checkbox" name="addr" onclick="deletethis(this,'divadds')"/>
</td>
<td>地址
<input name="textfield342" type="text" size="5" />
</td>
<td> </td>
<td>种类
<select name="select">
<option>公司</option>
<option>客户</option>
<option>仓库</option>
<option>门市</option>
<option>其它</option>
</select>
</td>
</tr>
<tr>
<td align="right">英文</td>
<td><textarea name="textfield322" cols="35" rows="5"></textarea></td>
<td align="right">中文 </td>
<td><textarea name="textarea" cols="35" rows="5"></textarea></td>
</tr>
</table>
</div>
<!-- 复制的DIV -->
<div id="divperson" style="display:none">
<table>
<tr>
<td>
删除<input type="checkbox" name="person" onclick="deletethis(this,'divpersons')" />
</td>
<td>地址</td>
<td>部门</td>
<td>联络人(英文)</td>
<td>联络人(中文)</td>
<td>电邮</td>
</tr>
<tr>
<td></td>
<td><input name="textfield34" type="text" size="15" /></td>
<td><input name="textfield35" type="text" size="15" /></td>
<td><input name="textfield362" type="text" size="15" /></td>
<td><input name="textfield36" type="text" size="15" /></td>
<td><input name="textfield37" type="text" size="15" /></td>
</tr>
<tr>
<td></td>
<td>活动电话</td>
<td>固定电话</td>
<td>内线</td>
<td>FAX</td>
<td>备注</td>
<td></td>
</tr>
<tr>
<td></td>
<td><input name="textfield38" type="text" size="15" /></td>
<td><input name="textfield39" type="text" size="15" /></td>
<td><input name="textfield310" type="text" size="15" /></td>
<td><input name="textfield311" type="text" size="15" /></td>
<td><input name="textfield312" type="text" size="15" /></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
