动态增加删除物件如(Text,Table)的例子

这是一个动态增加\删除物件如(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 >&nbsp</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 >&nbsp</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>