脚本语言

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

编辑:dnawo 日期:2007-01-09

字体大小: 小中大

例一：

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">

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

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

例二：

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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

例三：

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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

例四：

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>

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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上一篇: DW8-在动态页中插入XSL片断显示远程XML

下一篇: 提高你的DHTML性能

文章来自: 网络

引用通告: 查看所有引用 | 我要引用此文章

Tags:

最新日志:

评论: 1 | 引用: 0 | 查看次数: 4711

发表评论

请登录后再发表评论！

Powered By PJBlog3 V3.2.9.518 CopyRight 2005 - 2021, 木子屋 xhtml | css
Processed in 0.533203 second(s) , 6 queries , Simple Yellow Design By ChangHua(FatMouse) 闽ICP备19016051号-1

01.w3school	02.51Windows
03.ES6入门教程	04.PHP中文手册
05.MSDN\|.NET	06.Visual Studio\|O
07.ASP.NET MVC2	08.ASP.NET MVC3
09.jQuery\|D\|P	10.Vue.js
11.AspNetPager	12.SharpZipLib
13.AjaxPro	14.Json.NET
15.Web Services	16.BaiDu API
17.数据堂	18.纯真IP库
19.SharpDevelop	20.动软
21..NET Reflector	22.百度\|高德[坐标]
23.Layui\|G\|X\|Q	24.Ele\|uni-app
25.SourceForge	26.CodeProject
27.Dynamic Drive	28.CodePlex
29.GitHub	30.Gitee
31.IItellYou	32.面包多
33.一门APP	34.友盟数据
35.JSON格式化	36.在线文本比较
37.微软开发者中心	38.Android开发者中心

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

编辑:dnawo 日期:2007-01-09

Category

IM Online

User Panel

Search

Recent Comments

最新评论

Resources