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>
分享到：
相关推荐
动态添加删除表单元素（很经典）
jQuery表单元素动态增加删除代码是一款基于addel.js插件实现的动态表单增删特效。
JQuery添加删除表单元素代码是一款基于jquery.dynamic-rows插件实现的表单添加删除特效代码
使用js添加删除表单中的行,动态的添加,适合各种应用系统的前台页面
jQuery表单选项，如文本框input等元素动态增加删除代码是一款基于addel.js插件实现的动态表单增删特效。
jQuery表单元素动态增加删除代码是一款基于addel.js插件实现的动态表单增删特效。
一定要注意j变量从大往小循环，否则，删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化（这个问题摸索了好久，才搞定，切记） for(var j=serchResultLenth-1;j>=0;j--){ var ...
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
Javascript 操作select是表单中常见的一种，今天删除多个select值的时候出现了问题，搞了半天原来是索引引起的（即删除的时候要从索引大的开始删， 然后再删除索引小的，否则删除了索引小的后索引大的索引就变化了...
本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考，具体如下： 介绍 DOM是Document Object Modeule的缩写，一般来说，DOM操作分成3个方面。 1、DOM Core DOM Core并不专属于javascript，任何一种...
一定要注意j变量从大往小循环，否则，删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化（这个问题摸索了好久，才搞定，切记） 代码如下: for(var j=serchResultLenth-1;j>=0;j–){ var ...
addel是一个简单轻巧的jQuery插件，用于为UI提供支持，这些UI支持动态添加和删除HTML元素（考虑到表单元素）。 “ addel”是add-delete的缩写，应与歌手的名字一样发音为“ Adele”。 ..因为细节全在，人！目录显着...
gravity-tooltips, 将自定义字段添加到工具提示的每个表单元素中 三维重力工具提示在重力表单中添加自定义工具提示。注意：版本 2.0.0有许多以前版本的更改，包括 switch 使用 Kushagra Gour库使用 hint.css 库，并...
主要介绍了JavaScript实现向select下拉框中添加和删除元素的方法,涉及jQuery中append()与remove()方法动态操作表单元素的相关技巧,需要的朋友可以参考下
5.15使用一个关联数组来存储表单元素名和值 第6章使用JavaScript函数构建重用性 6.0简介 6.1创建一段可重用的代码 6.2把单个数据值传递到函数 6.3把复杂的数据对象传递给函数 6.4创建一个动态运行时...
摘要:脚本资源,Ajax/JavaScript,Ajax,无刷新 运用jQuery实现的Ajax无刷新删除和添加数据的表单，可适时删除表格、修改表格内容、添加内容，实现了前端的功能，当然如果需要全部实现，则需要后台脚本语言的支持。...
主要介绍了Vue.js实现的表格增加删除demo,结合实例形式分析了vue.js数据绑定及元素增加、删除等相关操作技巧,需要的朋友可以参考下
• 11.10.htm 动态修改表单元素内容 第12章（\第12章） • 12.1.htm Document树的简单例子 • 12.2.htm getElementById()方法 • 12.3.htm DOM结点属性 • 12.4.htm 文档...