IDC资讯中心
这是一个动态增加\删除物件如(text,table)的例子,
它的特点是可以不提交到后台,
直接在前台物件中保存数据.需要时,一起提交.
在asp中这样可以省去很多没有必要的送到后台处理.
很有用.我想了一天才出来.
这里用到了一个链表的概念,就是tablea+diva
diva—>存放tableb+divb
divb—>存放tablec+divc
…….
源码如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html">
<title>dhtml test</title>
<style type="text/css">
a
{
color: royalblue;
font-size:9pt;
text-decoration: none
}
a:hover
{
color:indigo;
font-size:9pt;
text-decoration: none
}
td
{
color: black;
font-family: 穝灿砰;
font-size: 9pt;
font-weight: 400
}
</style>
</head>
<body >
<center><b>动态增加\删除物件</b></center>
<div id="mybag0" align="center">
<!–在这里是开始加入第一个–>
</div>
<div align="center">
<table width="100%" border="1" cellspacing="1" cellpadding="1" bordercolor="tomato">
<tr>
<td colspan="16" align="center">
<input type="button" name="cmdadditm" value="add" onclick="additm();">
<input type="button" name="cmddelitm" value="del" onclick="delitm();">
</td>
</tr>
</table>
</div>
</body>
<script language="javascript" src="function/function.js">
</script>
<script language= "javascript">
//*********************************************************
// purpose: table tblitm1,tblitm2,tblitm3…….
// inputs:
// returns: true,false
//*********************************************************
var stradditem="";
var itemno=1; //,1,2,3,4……
function additm()
{
var mybag="mybag"+(itemno-1); //look for last bag
//stradditem=table+define new bag
stradditem="<table id=tblitm"+itemno+" width=100% border=0 cellspacing=1 cellpadding=1
bordercolor=red><tr><td colspan=6 > </td></tr><tr colspan=6 height=1align=center> <td align=center
colspan=13 width=100% bgcolor=mistyrose> <input type=checkbox name=chkappit"+ itemno +" value=y>"+
itemno +".table <input type=text name=txtappit"+ itemno + " size=35> </td> </tr> <tr><td
colspan=6 > </td></tr></table><div id=mybag"+itemno+" > </div>";
//将(table+define new bag)放入上一个袋囊,形成链表
document.all(mybag).innerhtml=stradditem;
itemno++;
}
//************************* ***********************************
//*********************************************************
// purpose: del()table tblitm1,tblitm2,tblitm3…….
// inputs:
// returns: true,false
//*********************************************************
function delitm()
{
var i;
var bsel;
var strurl;
for(i=1;i<itemno;i++) //chkappitx, forbidden show tblitmx
{
chkappitx="chkappit"+i;
tblitmx="tblitm"+i;
if (document.all(chkappitx).checked==true)
{document.all(tblitmx).style.display="none"
bsel=true;
}
}
if (bsel != true) {alert("must choose del items") ; return false; }
else return true;
}
//*********************************************************
</script>
</html>
