快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

动态增加\删除物件如(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 > </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>
返回类别: 教程
上一教程: 用ASP制作饼图、柱状图等
下一教程: 相对路径产生JS文件、HTML文件

您可以阅读与"动态增加\删除物件如(TEXT,TABLE)的例子"相关的教程:
· 动态的在页面上增加或删除一个文本框
· 三层动态下拉菜单的例子
· 动态增加表单元素
· ASP删除非空目录的例子
· 一个简朴的网上书城的例子(八)
    微笑服务 优质保证 索取样品