中国IT动力,最新最全的IT技术教程
最新100篇 | 推荐100篇 | 专题100篇 | 排行榜 | 搜索 | 在线API文档 | 网通镜像
首 页 | 程序开发 | 操作系统 | 软件应用 | 图形图象 | 网络应用 | 精文荟萃 | 教育认证 | 硬件维护 | 未整理篇 | 站长教程
ASP JS PHP工程 ASP.NET 网站建设 UML J2EESUN .NET VC VB VFP 网络维护 数据库 DB2 SQL2000 Oracle Mysql
服务器 Win2000 Office C DreamWeaver FireWorks Flash PhotoShop 上网宝典 CorelDraw 协议大全 网络安全 微软认证
硬件维护  CPU  主板  硬盘  内存  显卡  显示器  键盘鼠标  声卡音箱  打印机  机箱电源  BIOS  网卡  C#  Java  Delphi  vs.net2005
  当前位置:> 程序开发 > Web开发 > JavaScripts > Forms
JavaScript实现动态增加、删除表单域
作者:playyuer 时间:2001-11-24 11:17 出处:互联网 责编:chinaitpower
              摘要:JavaScript实现动态增加、删除表单域
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- JavaScript 实现动态增加、删除表单域 -->
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var i=0
function Add()
{
 var temp = document.body.children.item(0).rows.item(3).cells.item(0).children.item(0).rows.item(0).cells.item(0).children.item(0).children.item(0)
 temp.insertRow(temp.rows.length);
 temp.rows.item(temp.rows.length -1).insertCell(0);
 var xx=temp.rows.length -1 ;//-1
 var sHTML
 sHTML='<TABLE border=\"1\" style=\"border-collapse: collapse\" bordercolor=\"#111111\"width=\"100%\">' +
       '<TR>' +
       '<TD align=\"center\" colspan=\"4\">个人信息 (' + i++ +')</TR>' +
       '<TR>' +
       '<TD align=\"right\">姓名:</TD>' +
       '<TD>&nbsp;<INPUT TYPE=\"text\" NAME=\"tName\"></TD>' +
       '<TD align=\"right\">性别:</TD>' +
       '<TD>&nbsp;<INPUT TYPE=\"radio\" checked NAME=\"rSex\">先生&nbsp;&nbsp;<INPUT TYPE=\"radio\" NAME=\"rSex\">女士</TD>' +
       '</TR>' +
       '<TR>' +
       '<TD align=\"right\">职务:</TD>' +
       '<TD>&nbsp;<SELECT NAME=\"\">' +
       '<option value=\"其它\">&nbsp;其它&nbsp;</option>' +
       '<option value=\"经理\">&nbsp;经理&nbsp;</option>' +
       '</SELECT>' +
       '</TD>' +
       '<TD align=\"right\">邮件:</TD>' +
       '<TD>&nbsp;<INPUT TYPE=\"text\" NAME=\"tMail\"></TD>' +
       '</TR>' +
       '<TR>' +
       '<TD align=\"center\" colspan=\"4\"><input type=\"button\" value=\" 删除 \" onclick=\"Delete(this);\">'
       '</TR>' +
       '</TABLE>';
 temp.rows.item(temp.rows.length-1).cells.item(0).innerHTML=sHTML;
 temp.rows.item(temp.rows.length-1).cells.item(0).children.item(0).rows.item(3).cells.item(0).children.item(0).text=xx;
}
function Delete(x)
{
 var temp = document.body.children.item(0).rows.item(3).cells.item(0).children.item(0).rows.item(0).cells.item(0).children.item(0).children.item(0)
 temp.deleteRow(x.text.valueOf())
 for (var j=0;j<temp.rows.length;j++) temp.rows.item(j).cells.item(0).children.item(0).rows.item(3).cells.item(0).children.item(0).text=j;
}
file://-->
</SCRIPT>
</HEAD>
<BODY>
<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
    <td width="100%" align="center">Register</td>
</tr>
<tr>
    <td align="center">
<TABLE border="1" width="80%" style="border-collapse: collapse" bordercolor="#111111">
<TR>
<TD align="right" width="15%">公司:</TD>
<TD>&nbsp;<INPUT TYPE="text" NAME="tCompany" size="60">
</TD>
</TR>
<TR>
<TD align="right">地址:</TD>
<TD>&nbsp;<INPUT TYPE="text" NAME="tAddress" size="60">
</TD>
</TR>
<TR>
<TD align="right">电话:</TD>
<TD>&nbsp;<INPUT TYPE="text" NAME="tTelephone" size="30">
</TD>
</TR>
<TR>
<TD align="right">传真:</TD>
<TD>&nbsp;<INPUT TYPE="text" NAME="tFax" size="30">
</TD>
</TR>
</table>
    </td>
</tr>
<tr>
<td align="center">
<INPUT TYPE="button" value=" 添加 " onclick="Add()">
</td>
</tr>
<tr>
<td align="center">
<TABLE align=center border=0 width="100%" height="100%">
<TR>
       <TD width="100%" height="300" align="center">
           <DIV style=" OVERFLOW: auto;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; WIDTH: 80%; HEIGHT: 100%">
                <TABLE width="100%">
                </TABLE>
         </DIV>
    </TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td align="center">
<TABLE border="1" width="40%" style="border-collapse: collapse" bordercolor="#111111">
<TR>
<TD width="10%">&nbsp;<INPUT TYPE="checkbox" NAME="">寄资料</TD>
</TR>
<TR>
<TD>&nbsp;<INPUT TYPE="checkbox" NAME="">去</TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td align="center">
<INPUT TYPE="submit" value=" 提交 ">&nbsp;&nbsp;<INPUT TYPE="reset" value=" 清空 ">
</td>
</tr>
</table>
</BODY>
</HTML>
关闭本页
 
首页 | 投资与合作 | 服务条款 | 隐私政策 | 收藏本站 | 设为首页 | 新用户注册 | 免责声明 | 使用帮助
Copyright ©2005-2008 chinaitpower.com All rights reserved. www.chinaitpower.com 版权所有