JavaScript 实现动态增加、删除表单域四例
例一：
HTML代码
<!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>
例二：
HTML代码
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table>
<tr>
<td><input type="tex" name="text"></td>
<td bgcolor="#FFFFFF"><input type="text" name="text"></td><td bgcolor="#FFFFFF"><input type="text" name="text"></td><td bgcolor="#FFFFFF"><input type="text" name="text"></td><td ><input type="text" name="text"></td>
</tr>
</table>
<input type="button" name="add_line" value="增加下一行" OnClick="AddFileInput()">
</body>
</html>
<script language="VBScript">
NowFileInputNo = 1
NowFileInputCount = 0
Sub AddFileInput()
If NowFileInputCount < 10 Then
HTMLSrc = "<table Id=FileInput"& NowFileInputNo &"><tr><td> <input type=""text"" name=""text""></td><td><input type=""text"" name=""text""></td><td><input type=""text"" name=""text""></td><td><input type=""text"" name=""text""></td>"
HTMLSrc = HTMLSrc & "<td><input type=""text"" name=""text""><input type=button value=删除 class=cbutton OnClick=""DelFileInput("& NowFileInputNo &")""></td></tr></table>"& vbcrlf
document.all.add_line.InsertAdjacentHTML "beforeBegin", HTMLSrc
NowFileInputNo = NowFileInputNo + 1
NowFileInputCount = NowFileInputCount + 1
Else
Alert "增加太多记录行"
End IF
End Sub
Sub DelFileInput(tableno)
document.all("FileInput"& tableno).outerHTML = ""
NowFileInputCount = NowFileInputCount - 1
End Sub
</script>
例三：
HTML代码
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2719.2200" name=GENERATOR></HEAD>
<BODY>
<TABLE cellSpacing=0 cellPadding=0 width="98%" align=center border=0>
<TBODY>
<TR>
<FORM id=form1 name=form1 action="" method=post>
<TD>
<TABLE class=tableborder cellSpacing=0 cellPadding=4 width="100%"
border=0>
<TBODY>
<TR>
<TD bgColor=#c7e8f8>
<DIV align=center><B>问题 1:</B> </DIV></TD>
<TD bgColor=#c7e8f8><INPUT class=tableborder size=60 name=Question1>
</TD></TR>
<TR>
<TD> </TD>
<TD><B>问题类型： </B><INPUT type=checkbox value=True name=chkQueType1>
多选类型 <BR>
<DIV id=__idQueOption1 name="__idQueOption1"><B>问题选项：</B> <INPUT
class=tableborder onpropertychange=addNewChild(this) size=60
name=QueOption1> </DIV></TD></TR></TBODY></TABLE>
<DIV id=__idInsertBefore></DIV><INPUT type=hidden value=1 name=newTable>
<BR>
<DIV
style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px"
align=right>
<label>
<input name="textfield" type="text" value="这里显示输出的内容吧">
</label>
<INPUT class=CustButton onclick=addNewQuestion() type=button value=增加一个新问题>
<INPUT class=CustButton type=submit value=保存设置> <INPUT class=CustButton type=reset value=重新设置>
</DIV></TD></FORM></TR></TBODY></TABLE>
<SCRIPT>
function addNewQuestion()
{
document.form1.newTable.value = parseInt(document.form1.newTable.value) + 1;
var newItemId;
if( (document.form1.newTable.value).length > 2 )
{
alert("您的调查问题总数不能超过 99 个。")
window.location.reload();
}
newItemId = document.form1.newTable.value;
var objItem = '<table cellspacing="0" cellpadding="4" width="100%" border="0" class="tableborder">';
objItem += ' <tr>';
objItem += '<td bgcolor="#C7E8F8">';
objItem += ' <div align="center"><b>问题 ' + newItemId + ':</b> </div>';
objItem += ' </td>';
objItem += ' <td bgcolor="#C7E8F8">';
objItem += ' <input size="60" name="Question' + newItemId + '" class="tableborder">';
objItem += ' </td>';
objItem += ' </tr>';
objItem += ' <tr>';
objItem += ' <td> </td>';
objItem += ' <td><b>问题类型： </b><input type="checkbox" value="True" name="chkQueType' + newItemId + '">';
objItem += ' 多选类型';
objItem += ' <div id="__idQueOption' + newItemId + '"><b>问题选项：</b>';
objItem += ' <input onpropertychange="addNewChild(this)" size="60" name="QueOption' + newItemId + '" class="tableborder">';
objItem += ' </div>';
objItem += ' </td>';
objItem += ' </tr>';
objItem += '</table>';
document.all.__idInsertBefore.insertAdjacentHTML("beforeBegin", objItem);
}
function showTips(obj)
{
obj.title=obj.value;
}
function addNewChild(obj)
{
var isblank = "false";
var objName = obj.name;
var last2Char = objName.substring(objName.length - 2);
if( last2Char.substring(0, 1) > '9' || last2Char.substring(0, 1) < '0' )
{
last2Char = last2Char.substring(1, 2);
}
for(var i=0; i < document.form1.elements[objName].length; i++)
{
if(document.form1.elements[objName].item(i).value == "")
isblank = "yes"
}
if( isblank != "yes" )
{
var objItem = '<div id="__idQueOption' + last2Char + '"><b>问题选项：</b>';
objItem += ' <input onpropertychange="addNewChild(this)" size="60" name="' + objName + '" class="tableborder" />';
objItem += '</div>';
objName = "__idQueOption" + last2Char;
var varQueOption = document.all[objName];
if( varQueOption.length != null )
varQueOption = varQueOption.item(varQueOption.length-1);
varQueOption.insertAdjacentHTML("afterEnd",objItem);
}
}
</SCRIPT>
</BODY></HTML>
例四：
HTML代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
function form_submit()
{
var nn=document.form1.file_num.value;
alert("Total:"+nn);
}
</script>
</head>
<body>
<script language="JavaScript">
var n=1;
</script>
<form method="post" enctype="multipart/form-data" name="form1" >
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="test">
<tr>
<td colspan="2">
<input type="file" name=f1 size="60"><script language="JavaScript">document.write(n);</script>
</td>
</tr>
</table>
<script language="JavaScript">
function addline()
{
n++;
newline=document.all.test.insertRow();
newline.insertCell().innerHTML="<input type='file' name=f"+n+" size='60'>"+n;
document.form1.file_num.value=n;
}
</script>
<input type="button" onClick="addline()" name="Submit" value="Add">
<input type="button" onClick="form_submit()" name="Submit" value="Submit">
<input type="hidden" name="file_num" value="1">
</form>
</body>
</html>
分享到：
相关推荐
JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码.zip JavaScript实现的可视化表单设计器源码...
这段代码提供了一个基础的动态文件域增加和删除的功能。对于需要实现类似功能的开发者来说，需要理解和掌握JavaScript的基本语法、DOM操作方法、事件处理机制，以及HTML表单元素的使用。此外，代码中还涉及到了...
arcgis api for javascript 实现动态轨迹（巡查轨迹）
尽管描述中提到的示例可能是纯JavaScript实现，但在ASP.NET中，动态增加表单元素通常涉及到服务器端控件和回发事件。例如，使用`PlaceHolder`控件作为容器，然后在服务器端代码中动态添加`TextBox`控件。 4. **C#**...
在JavaScript编程中，动态增加文本框是一项常见的交互功能，它允许用户在页面上根据需要添加额外的输入元素，而无需离开当前页面或进行页面刷新。这个功能常用于表单提交、数据输入等场景，比如创建多行文本输入、...
虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1] JavaScript在...
本文实例讲述了JavaScript实现动态添加Form表单元素的方法。分享给大家供大家参考，具体如下： 之前写过类似的文章（如：javascript实现的动态添加表单元素input,button等）,现在看来比较初级,弄一个高级的简单的 ...
这些变化可以通过JavaScript来实现，例如响应用户的点击、表单提交等事件，或者根据用户的位置、时间等信息动态展示不同的内容。 ### JavaScript在动态网页开发中的应用 1. **页面元素的动态更新**：利用DOM...
### JavaScript 实现输入多行动态输入 在网页开发过程中，特别是在使用JSP处理用户输入时，经常需要收集用户的多行输入。本篇文章将基于提供的标题、描述和部分内容，详细阐述如何利用JavaScript实现输入多行动态...
javascript实现的动态目录树,适合于用客户端脚本实现WEB页面目录树效果的情况。
### JavaScript 实现动态增加删除表格行（兼容 IE/FF） #### 概述 在 Web 开发中，动态地增加或删除表格行是一项常见的需求。这项技术可以极大地提高用户体验，使得用户能够根据自己的需要来调整表格内容。本文将...
本文没有什么技术上创新，只要会一点Javascript的技术就可以写了。 第一步： 在页面查看源代码，把Form中包含的需要填列的HTML控件找出来如： <form name=”mainfrm” action=”” method=”post”> <input...
在这个个人主页中，JavaScript可能被用来实现动态功能，如按钮点击事件、表单验证、时间显示、滚动效果、模态框弹出等。同时，它还可以与HTML和CSS紧密配合，实现实时更新页面内容，提供更丰富的用户交互体验。 ...
理解JavaScript变量作用域.pdf 本人还有几十本经典javascript书籍以及无数javascript资料,要的加我qq 568094881,本人网址:www.maoshanhai.com
JavaScript是一种广泛应用于网络开发的脚本语言，它主要用于网页和浏览器交互，实现动态效果和功能。本书《JavaScript动态网页编程实例版》显然是一本旨在帮助读者深入理解和实践JavaScript编程的教程。通过书中提供...
在实现基于Bootstrap的动态表单时，我们通常会借助一些工具或库，如本例中提到的"Bootstrap Form Builder"。这个工具可能是一个基于GitHub的项目，版本为20160522（根据压缩包文件名推测）。它允许用户通过拖放方式...
#### jQuery插件实现表单域与JSON数据交互 在提供的文档示例中，作者通过自定义jQuery插件实现了表单域与JSON数据之间的交互。下面将详细解析这一插件的具体实现及其工作原理。 #### jQuery插件详解 ##### 插件...
这本"JavaScript 网页设计300例"很可能包含了丰富的实例，旨在帮助读者深入理解和掌握JavaScript在网页设计中的应用。以下将详细讨论JavaScript的基础知识、网页设计中的应用以及可能涵盖的一些关键实例。 1. **...