JavaScript 实现动态增加、删除表单域

原创 2001年08月29日 10:45:00

<!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>

JavaScript 实现动态增加、删除表单域

  • zgqtxwd
  • zgqtxwd
  • 2008年04月24日 20:05
  • 193

javascript动态添加、修改、删除对象的属性和方法

上一节介绍了如何引用一个对象的属性和方法,现在介绍如何为一个对象添加、修改或者删除属性和方法。在其他语言中,对象一旦生成,就不可更改了,要为一个对象添加修改成员必须要在对应的类中修改,并重新实例化,而...
  • zhouqixiang
  • zhouqixiang
  • 2007年12月16日 14:27
  • 35193

JavaScript动态增加节点和删除节点

其实HTML就是类似于XML,曾经W3C希望使用XML替代HTML,这就是说明,HTML和XML还是有一定的共同特点 的,所以说,对于XML,我们有解析和动态增加或者减少节点的功能,这个如果用在HT...
  • a352193394
  • a352193394
  • 2012年04月30日 19:14
  • 7644

JavaScript动态添加和删除控件

方法一: input type="button" onClick="add();" value="添加控件">div id="a">div>script>var num=0;function add(...
  • lip009
  • lip009
  • 2006年09月01日 10:16
  • 3726

javascript实现动态添加和删除文件上传选项

利用javascript来实现:
  • damogu_arthur
  • damogu_arthur
  • 2014年11月14日 10:36
  • 1250

使用JAVASCRIPT实现动态增加、删除选择项

这是在做现在一个系统的时候需要实现这样的功能时做的,先放在这里,如果以后忘了还可以到这里来找找,有些时候还就记得有些东西写过,不过因为一段时间的原因,忘记了,如果再去翻原来的程序那无疑是很大的工作量。...
  • daryl715
  • daryl715
  • 2007年11月20日 11:58
  • 647

使用JAVASCRIPT实现动态增加、删除选择项

这是在做现在一个系统的时候需要实现这样的功能时做的,先放在这里,如果以后忘了还可以到这里来找找,有些时候还就记得有些东西写过,不过因为一段时间的原因,忘记了,如果再去翻原来的程序那无疑是很大的工作量。...
  • fenglibing
  • fenglibing
  • 2007年08月07日 20:13
  • 6450

Javascript实现动态增加、删除表格域

Dynamic add or delete rows of a table     function getTable() {        return document.getElementBy...
  • vic78
  • vic78
  • 2005年01月10日 16:13
  • 827

动态的在页面上增加或删除一个文本框

在web开发中,经常会遇到这样的问题:怎么样动态的在页面上增加或删除一个文本输入框?通常有两种方法:1.利用后台服务:比如在session中设置一个变量num,每点一次"增加"按钮num的值+1,然后...
  • lcllcl987
  • lcllcl987
  • 2005年04月15日 10:31
  • 2094

jQuery实现表格行的动态增加与删除(改进版)

http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html
  • huangxiaoya1993
  • huangxiaoya1993
  • 2014年07月30日 15:24
  • 994
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript 实现动态增加、删除表单域
举报原因:
原因补充:

(最多只允许输入30个字)