javascript 实现动态增加、删除表单域
2007-11-27 17:49:44 来源：WEB开发网核心提示：<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN><!-- JavaScript 实现动态增加、删除表单域 --><HTML><HEAD><TITLE> New Document </
<!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> <INPUT TYPE=\text\ NAME=\tName\></TD> +
<TD align=\right\>性别:</TD> +
<TD> <INPUT TYPE=\radio\ checked NAME=\rSex\>先生 <INPUT TYPE=\radio\ NAME=\rSex\>女士</TD> +
</TR> +
<TR> +
<TD align=\right\>职务:</TD> +
<TD> <SELECT NAME=\\> +
<option value=\其它\> 其它 </option> +
<option value=\经理\> 经理 </option> +
</SELECT> +
</TD> +
<TD align=\right\>邮件:</TD> +
<TD> <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> <INPUT TYPE=text NAME=tCompany size=60>
</TD>
</TR>
<TR>
<TD align=right>地址:</TD>
<TD> <INPUT TYPE=text NAME=tAddress size=60>
</TD>
</TR>
<TR>
<TD align=right>电话:</TD>
<TD> <INPUT TYPE=text NAME=tTelephone size=30>
</TD>
</TR>
<TR>
<TD align=right>传真:</TD>
<TD> <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%> <INPUT TYPE=checkbox NAME=>寄资料</TD>
</TR>
<TR>
<TD> <INPUT TYPE=checkbox NAME=>去</TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td align=center>
<INPUT TYPE=submit value= 提交 > <INPUT TYPE=reset value= 清空 >
</td>
</tr>
</table>
</BODY>
</HTML>
<!-- 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> <INPUT TYPE=\text\ NAME=\tName\></TD> +
<TD align=\right\>性别:</TD> +
<TD> <INPUT TYPE=\radio\ checked NAME=\rSex\>先生 <INPUT TYPE=\radio\ NAME=\rSex\>女士</TD> +
</TR> +
<TR> +
<TD align=\right\>职务:</TD> +
<TD> <SELECT NAME=\\> +
<option value=\其它\> 其它 </option> +
<option value=\经理\> 经理 </option> +
</SELECT> +
</TD> +
<TD align=\right\>邮件:</TD> +
<TD> <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> <INPUT TYPE=text NAME=tCompany size=60>
</TD>
</TR>
<TR>
<TD align=right>地址:</TD>
<TD> <INPUT TYPE=text NAME=tAddress size=60>
</TD>
</TR>
<TR>
<TD align=right>电话:</TD>
<TD> <INPUT TYPE=text NAME=tTelephone size=30>
</TD>
</TR>
<TR>
<TD align=right>传真:</TD>
<TD> <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%> <INPUT TYPE=checkbox NAME=>寄资料</TD>
</TR>
<TR>
<TD> <INPUT TYPE=checkbox NAME=>去</TD>
</TR>
</TABLE>
</td>
</tr>
<tr>
<td align=center>
<INPUT TYPE=submit value= 提交 > <INPUT TYPE=reset value= 清空 >
</td>
</tr>
</table>
</BODY>
</HTML>
中查找“javascript 实现动态增加、删除表单域”更多相关内容
中查找“javascript 实现动态增加、删除表单域”更多相关内容更多精彩
赞助商链接
