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实现的可视化表单设计器源码...
arcgis api for javascript 实现动态轨迹（巡查轨迹）
本文主要阐述了如何使用Vue.js和Element UI来实现表单的动态生成，并为这些动态生成的表单添加了验证功能。 知识点一：Vue.js框架基础 Vue.js是一个构建用户界面的渐进式JavaScript框架，核心库仅关注视图层，易于...
尽管描述中提到的示例可能是纯JavaScript实现，但在ASP.NET中，动态增加表单元素通常涉及到服务器端控件和回发事件。例如，使用`PlaceHolder`控件作为容器，然后在服务器端代码中动态添加`TextBox`控件。 4. **C#**...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它在客户端运行，为用户提供动态、交互式的用户体验。在这个“javascript实现注册表单”的项目中，我们将会探讨如何使用JavaScript来创建一个功能丰富的...
虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1] JavaScript在...
本资源"jQuery表单元素动态增加删除代码.zip"聚焦于一个特定的应用场景：通过jQuery实现表单元素的动态添加与删除功能。这种功能在现代Web应用中非常常见，例如在线表单填写、购物车管理等，它允许用户根据需要...
总结，通过JavaScript实现表单的自动计算，不仅可以提高用户在填写表单时的效率，还能增强网页的交互性。掌握这些技巧，可以让你的网页变得更加智能和用户友好。实践中，还可以结合实际需求进行更多定制化的设计，让...
本文实例讲述了JavaScript实现动态添加Form表单元素的方法。分享给大家供大家参考，具体如下： 之前写过类似的文章（如：javascript实现的动态添加表单元素input,button等）,现在看来比较初级,弄一个高级的简单的 ...
JavaScript弹出层表单提交是一种常见的用户交互设计，它允许用户在不离开当前页面的情况下填写并提交表单数据。这种技术常用于网站的登录、注册、评论或编辑功能，提供了良好的用户体验，因为用户无需跳转到新页面...
这些变化可以通过JavaScript来实现，例如响应用户的点击、表单提交等事件，或者根据用户的位置、时间等信息动态展示不同的内容。 ### JavaScript在动态网页开发中的应用 1. **页面元素的动态更新**：利用DOM...
javascript实现的动态目录树,适合于用客户端脚本实现WEB页面目录树效果的情况。
JavaScript特效是网页交互性和用户体验提升的重要手段，"JavaScript特效100例"涵盖了各种实用的JavaScript编程技巧，用于创建令人眼前一亮的视觉效果。这些特效不仅能够吸引用户注意力，还可以增强网站的互动性，...
本文没有什么技术上创新，只要会一点Javascript的技术就可以写了。 第一步： 在页面查看源代码，把Form中包含的需要填列的HTML控件找出来如： <form name=”mainfrm” action=”” method=”post”> <input...
JavaScript是一种运行在客户端的脚本语言，它为网页增加了动态效果和交互功能。在本项目中，JavaScript可能被用来处理按钮点击事件、表单验证、时间显示、滚动效果以及模态框弹出等交互动作。与HTML和CSS的配合，...
JavaScript是一种广泛应用于网络开发的脚本语言，它主要用于网页和浏览器交互，实现动态效果和功能。本书《JavaScript动态网页编程实例版》显然是一本旨在帮助读者深入理解和实践JavaScript编程的教程。通过书中提供...
压缩包文档一个简单的示例，展示如何使用JavaScript实现一个“表单验证”的功能，这是Web开发中非常常见的需求。
在实现基于Bootstrap的动态表单时，我们通常会借助一些工具或库，如本例中提到的"Bootstrap Form Builder"。这个工具可能是一个基于GitHub的项目，版本为20160522（根据压缩包文件名推测）。它允许用户通过拖放方式...
总结起来，JavaScript实现动态添加表单元素的关键步骤包括： 1. 使用`document.createElement`创建新的元素。 2. 设置新元素的属性，如`type`和`name`。 3. 获取目标容器元素，通常是通过`getElementById`。 4. 使用...
通过学习这部分，你可以理解如何选取、添加、修改或删除页面元素，实现动态更新网页。 2. **第20章**：可能涵盖AJAX（Asynchronous JavaScript and XML），一种让网页在不刷新整个页面的情况下与服务器进行数据交换...