<!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动态增加文件域表单的实现原理与方法 在页面上动态添加文件上传控件，以便用户上传多个文件，是网站表单设计中的常见需求。传统的静态页面设计只允许用户上传一个文件，而动态增加文件域可以使用户根据...
综上所述，本文介绍了一个使用JavaScript实现动态增加文件域表单的实例，通过这个实例，我们可以了解动态表单元素添加和删除的原理和方法。理解这些基础知识对于前端开发人员来说是非常重要的，因为它可以大大提高...
在使用JQuery来实现动态表格增加行的场景中，主要涉及到的技术点包括： 1. DOM操作：文档对象模型（DOM）允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中，DOM操作用于动态地向表格中插入新的...
以上就是JavaScript实现页面特效的一些基础知识和常见应用场景。学习并熟练掌握这些技巧，可以让你的网页更加生动有趣，提升用户体验。在实践中不断探索和优化，你将能够创造出更多独特且吸引人的特效。
标题“动态增加/删除文件域”暗示了一个在网页或者应用中动态管理文件上传区域的技术场景。在Web开发中，文件域通常指的是用于文件上传的HTML表单元素`<input type="file">`，允许用户选择文件进行上传。动态增加或...
JavaScript主要运行在浏览器环境中，用于增强用户界面，实现动态内容、表单验证、交互式网页等。随着技术的发展，JavaScript也逐渐延伸到服务器端开发（如Node.js）、移动应用开发、桌面应用开发等多个领域。 **...
函数在JavaScript中扮演着重要角色，JavaScript5.0对函数进行了优化，比如支持函数表达式和函数声明，增加了闭包的概念，使得函数可以拥有自己的作用域，同时支持函数内部的arguments对象，可以动态获取传入的参数。...
3. 动态内容：使用JavaScript，可以实现实时更新内容，如计时器、实时天气预报等。 4. 表单验证：JavaScript可以对用户输入进行验证，提供即时反馈，避免无效数据提交到服务器。 三、北大青鸟的JavaScript课程内容...
3. **DOM操作**：Document Object Model（DOM）是网页内容的结构化表示，JavaScript可以用来操作DOM，改变页面元素、添加或删除元素，实现动态更新。 4. **事件处理**：JavaScript通过监听和响应用户或浏览器触发的...
JavaScript，又被称为JS，是一种广泛应用于网页和网络应用的编程语言，主要负责处理客户端的交互逻辑，让网页具有动态性和用户交互性。本教程“Javascript基础_javascrip_castkmb_javascript_”旨在为初学者提供...
JavaScript在网页特效方面的应用十分广泛，如DOM操作（创建、查找、修改、删除元素）、CSS样式动态改变、动画效果（setTimeout、requestAnimationFrame）、AJAX（异步数据请求）实现动态加载等。利用JavaScript，...
JavaScript不仅可以用于前端开发，如表单验证、页面动画、Ajax异步通信等，还可以通过Node.js在服务器端运行，实现全栈开发。 基础语法： JavaScript的基础包括变量、数据类型、运算符、控制结构（如if-else、...
《JavaScript权威指南（第6版）》主要讲述的内容涵盖JavaScript语言本身，以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5，很多章节完全重写，增加了当今Web开发的最佳实践的内容，新增...
在本篇中，我们将探讨如何使用AngularJS实现动态添加和删除div元素的功能。 首先，我们来解析一下这段文章中提供的HTML代码和JavaScript代码。文章中描述的功能是在页面上通过点击按钮来动态地添加或删除一个包含...
JavaScript可以用于创建动态网页，比如响应式按钮、表单验证、动画效果、AJAX（异步JavaScript和XML）通信等。 1. **基础语法**：JavaScript的基础包括变量声明（var、let、const）、数据类型（如字符串、数字、...
本书要讲述的内容涵盖JavaScript语言本身，以及Web浏览器所实现的JavaScriptAPI。本书第6版涵盖了HTML5和ECMAScript5，很多章节完全重写，增加了当今Web开发的最佳实践的内容，新增的章节包括jQuery、服务器端...
《JavaScript权威指南（第6版）》主要讲述的内容涵盖JavaScript语言本身，以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5，很多章节完全重写，增加了当今Web开发的最佳实践的内容，新增...
**动画效果**：结合CSS和JavaScript实现各种动画效果，如淡入淡出、滑动等。 #### 七、学习资源推荐 **官方文档**：ECMAScript规范提供最权威的JavaScript语言特性说明。 **在线教程**：MDN Web Docs、W3Schools...