javaeye 写道
这几天我一直在做数据采集工作，又一次发现我同事在展示我的数据的时候，使用了一些动态增加表单元素。我发现这很好玩，所以我也试着找了些资料和加上自己的整理，整出了以下一张网页。可以动态的增加和删除表单元素，但是有些不足，不能删除上次添加的，若删除后，在添加就不能在删除的位置上添加，还有我只在IE下测试通过。这个我不知道怎么做，主要是没有时间去研究，如果有哪位告诉可以留言留言。让俺也学习下。O(∩_∩)O (注：本程序在11月16日修改过。)
<html>
<head>
<title>动态添加表单元素</title>
</head>
<script language="javascript">
//以下代码是动态添加表单元素。
var elementCount = 0;
//动态增加表单元素。
function AddElement(mytype){
//得到需要被添加的html元素。
var TemO=document.getElementById("add");
//创建一个指定名称（名称指定了html的类型）html元素。
var newInput = document.createElement("input");
elementCount = elementCount + 1;
//指定input的类型。
newInput.type=mytype;
//动态生成id。
newInput.id="input"+(elementCount);
TemO.appendChild(newInput);
var newline= document.createElement("br");
newline.id = "br"+(elementCount);
TemO.appendChild(newline);
}
//动态删除表单元素。
function delElement(mytype){
var TemO=document.getElementById("add");
if (elementCount>0){
var newInput = document.getElementById("input"+elementCount);
TemO.removeChild(newInput);
var newline= document.getElementById("br"+(elementCount));
elementCount = elementCount - 1;
TemO.removeChild(newline);
}
}
</script>
<body>
<input name="" type="button" value="新建文本框"
onClick="AddElement('text')" />
<input name="" type="button" value="新建复选框"
onClick="AddElement('checkbox')" />
<input name="" type="button" value="新建单选框"
onClick="AddElement('radio')" />
<input name="" type="button" value="新建文件域"
onClick="AddElement('file')" />
<input name="" type="button" value="新建密码框"
onClick="AddElement('password')" />
<input name="" type="button" value="新建提交按钮"
onClick="AddElement('submit')" />
<input name="" type="button" value="新建恢复按钮"
onClick="AddElement('reset')" />
<input name="" type="button" value="删除恢复按钮"
onClick="delElement('reset')" />
<br>
<form action="" method="get" name="frm">
<div id="add">
<input type="text" name="textfield">
<br>
</div>
</form>
</body>
</html>
分享到：
相关推荐
下面我们将深入探讨如何利用JavaScript实现动态添加和删除表单元素的功能。 一、动态添加表单元素 1. 创建新元素：首先，我们需要使用JavaScript创建新的HTML元素。例如，如果要添加一个文本输入框，可以使用`...
首先，`addel.js`是这个实现的核心脚本文件，它包含了动态添加和删除表单元素的逻辑。在JavaScript中，我们可以使用DOM操作方法来创建、插入或删除HTML元素。jQuery提供了更加简洁和强大的API，比如`$().append()`...
本资源“jQuery添加删除表单元素代码.zip”提供了一种利用jQuery动态添加和删除表单行的解决方案，主要依赖于名为"jquery.dynamic-rows"的插件。这个插件是针对那些需要在用户交互时动态管理表单元素的应用场景设计...
在动态表单中，除了需要定义表单结构和验证规则之外，还需要处理用户与表单的交互逻辑，比如添加和删除表单字段。本文中的代码示例，提供了点击按钮添加新表单字段的功能，同时，为每个动态生成的表单字段附加了一个...
使用js添加删除表单中的行,动态的添加,适合各种应用系统的前台页面
总结，这个资源是关于使用jQuery实现动态添加和删除表单元素的示例代码，涉及到jQuery库的基本用法、DOM操作、事件处理和Ajax交互等多个重要知识点。通过学习和理解这些内容，开发者能够提升在前端开发中的动态交互...
在动态添加和删除表单元素的场景中，PHP需要能够根据用户的请求动态生成或移除HTML代码。 1. **动态生成表单**：在PHP中，可以使用字符串拼接或者模板引擎（如Twig）来动态生成HTML代码。例如，你可以创建一个数组...
1. **动态创建表单元素**：使用JavaScript，我们可以根据需求动态生成表单组件，例如`<input>`、`<select>`、`<textarea>`等。这通常涉及到`document.createElement()`方法，用于创建新的HTML元素，然后通过`...
在实际应用中，动态增加和删除元素通常与数据绑定、Ajax异步请求、以及各种前端框架（如React、Vue、Angular）结合使用。这些框架提供更高级别的抽象，使得操作DOM更加简便，同时提高了性能和可维护性。 总结，HTML...
这个功能允许用户在运行时动态添加或删除表单输入字段，例如文本框，极大地提高了用户体验和数据输入的灵活性。 首先，我们需要了解jQuery的核心概念。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件...
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
在传统的HTML表单中，我们通常会预先定义好所有的表单元素，但在某些情况下，比如用户需要根据需求自定义输入项，动态添加表单就显得非常实用。AngularJS通过其数据绑定和指令系统为这一功能提供了便利。 ### 1. ...
在JavaScript（JS）编程中，动态增加和删除行是一项常见的任务，特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户体验，使用户能够实时地添加或移除数据，无需刷新整个页面。以下是对这一知识点的详细...
在实际应用中，这些访问方法可以用来获取用户输入的数据、验证表单、改变表单元素的属性或样式，甚至实现动态创建和删除表单元素。例如，你可以用JavaScript来检查用户名输入是否为空，或者在用户提交表单前验证密码...
在JavaScript中，动态添加和删除表格是常见的网页交互功能，主要应用于数据展示、表单处理等场景。这篇博文通过一个简单的实例，展示了如何利用JavaScript实现这个功能。在讲解之前，我们先了解一下HTML表格的基本...
在动态增加和删除表单元素时，我们通常会用到如`$("#elementID")`或`$(".className")`这样的选择器来获取或操作特定的表单元素。 接着，jQuery的事件处理功能也是实现此特效的关键。通过绑定`click`、`focus`、`...
3. jQuery动态生成表单：利用jQuery的append()方法，根据业务需求动态生成表单元素。例如，创建一个输入框和提交按钮。 ```javascript var formData = [ { type: 'text', label: '姓名', name: 'username' }, { ...