最近在項(xiàng)目中做的一個(gè)表格的操作(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(){//調(diào)用添加的方法
addentityss("divadd");
}
function addPerson(){//用戶輸入添加的個(gè)數(shù)
var id = document.getElementById("numId").value;
if (id == ""){
alert("請(qǐng)輸入要添加的聯(lián)絡(luò)人數(shù)量！");
return;
} else if (isNaN(id)){
alert("您輸入的聯(lián)絡(luò)人數(shù)量不是數(shù)字！");
return;
} else if (id < 1 || id > 9){
alert("添加的聯(lián)絡(luò)人數(shù)量范圍是 1 至 9 ！");
return;
} else {
for (var i=0;i<id;i++){//循環(huán)添加
addentityss("divperson");
}
}
}
function deletethis(obj,divname){//checkbox選擇刪除
var flg=confirm("確定要?jiǎng)h除這行記錄？");
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>聯(lián)絡(luò)人(英文)</td>
<td>聯(lián)絡(luò)人(中文)</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>活動(dòng)電話</td>
<td>固定電話</td>
<td>內(nèi)線</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="加聯(lián)絡(luò)人" onclick="addPerson();"/>
</td>
</tr>
</table>
<p> </p>
<!-- 復(fù)制的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>
<!-- 復(fù)制的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>聯(lián)絡(luò)人(英文)</td>
<td>聯(lián)絡(luò)人(中文)</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>活動(dòng)電話</td>
<td>固定電話</td>
<td>內(nèi)線</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>
|
