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>
分享到：
相关推荐
在使用JQuery来实现动态表格增加行的场景中，主要涉及到的技术点包括： 1. DOM操作：文档对象模型（DOM）允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中，DOM操作用于动态地向表格中插入新的...
5.16.htm JavaScript实现阶乘函数 5.17.htm 全局变量和局部变量的区别 5.18.htm 变量实例 5.19.htm 在函数内部使用arguments 5.20.htm 创建并使用动态函数的例子 5.21....
11. 购物车常见操作逻辑：实现购物车时需要处理的常见逻辑，比如增加商品数量、减少商品数量、删除商品以及全选和反选等，都需要通过编写对应的JavaScript函数来实现。 通过以上这些知识点，可以实现一个基本的...
**JavaScript 模板（JSP）的 MVC 模式** 在Web开发中，Model-View-Controller（MVC）模式是一种被广泛采用的设计模式，它有效地分离了业务逻辑、数据和用户界面。JSP（JavaServer Pages）是Java平台上的一个技术，...
如果想实现更加复杂的交互应用，或者希望xhEditor编辑器能够和自己的Javascript代码实现互相访问，那么你可以选择使用方法2，相对具有更大的自由空间。 xhEditor也提供了即时的卸载编辑器方法： $('#elm1')....