<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动态添加input、select等表单元素的效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css教程">
body{font:12px/1.5 tahoma,arial,b8bf53,sans-serif;}
ul{margin:0;padding:0;list-style:none;}
a{margin-left:5px;color:#07f;text-decoration:none;}
a:hover{text-decoration:underline;}
input{border:1px solid #ccc;margin:2px;}
table{border-collaps教程e:collapse;border-spacing:0;}
td{margin:0;padding:10px;border:1px solid #ccc;}
</style>
<script type="text/网页特效" src="http://www.111cn.net/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#demo1").easyinsert();//最简单的应用
$("#demo2").easyinsert({
name: ["demo2", "demo2"],//可以同时添加两个(或更多),name值相同也必须分开设置,name数组的长度就是每组input的个数。type、value、maxlength、classname四种属性,若同组组员的设置一样,可以只设置一次。
value: ["默认值2-1", "默认值2-2"],//可以给同组input分别设置默认值
maxlength: 15,//每组input的maxlength都一样,无需使用数组
classname: ["demo2_class1", "demo2_class2"],//不用我解释了吧
toplimit: 5,//可以添加组数上限(默认是0,表示无上限),它是总管,so,name相当于小组组长
initvalue: [//初始化的时候,各input的value就是归它管,必须是数组
["初始值2-1", "初始值2-2"]
]
});
$("#demo3").easyinsert({
name: "demo3",
toplimit: 2,
initvalue: [
["初始值3-1"],//必须是数组,就算每组只有一个input
["初始值3-2"],
["初始值3-3"]//小三儿,别想蒙混过关,总管只允许添加两组
]
});
$("#demo4").easyinsert({
name: ["demo4", "demo4", "demo4", "demo4", "demo4", "demo4"],
type: ["text", "radio", "password", "checkbox", "file", "button"],
value: ["我是text", "我是radio", "我是password", "我是checkbox", "", "我是button"]
});
$("#demo5").easyinsert({//type新增custom和select
name: ["demo5", "demo5", "demo5", "demo5"],
type: ["custom", "text", "custom", "select"],
value: ["<strong style="color:#ff7b0e;">科目:</strong>", "", "<strong style="color:#ff7b0e;">类型:</strong>", { '理论': '1', '技能': '2', '上机': '3' }],
initvalue: [
["<strong style="color:#ff7b0e;">科目:</strong>", "初始值5-1", "<strong style="color:#ff7b0e;">类型:</strong>", { '理论a': '1', '技能a': '2', '上机a': '3' }],
["<strong style="color:#ff7b0e;">科目:</strong>", "初始值5-1", "<strong style="color:#ff7b0e;">类型:</strong>", { '理论b': '1', '技能b': '2', '上机b': '3' }]
]
});
});
/**
* easyinsert 4.0
* http://ilikejquery.com/easyinsert
*
* @creator wo_is神仙 <jsw0528@mrzhang.net>
* @depend jquery 1.4+
**/
;(function($){
$.fn.extend({
"easyinsert": function(o){
o = $.extend({
//触发器
clicker: null,//根据class(或id)选择,默认.next()获取
//父标签
wrap: "li",
name: "i-text",
type: "text",
value: "",
maxlength: 20,
classname: "i-text",
//新增上限值
toplimit: 0,//0表示不限制
//初始化值,二维数组
initvalue: null//用于修改某资料时显示已有的数据
}, o || {});
var oo = {
remove: "<a href="#nogo" class="remove">移除</a>",
error1: "参数配置错误,数组的长度不一致,请检查。",
error2: "参数配置错误,每组初始化值都必须是数组,请检查。"
}
//容器
var $container = $(this);
var allowed = true;
//把属性拼成数组(这步不知道是否可以优化?)
var arrcfg = new array(o.name, o.type, o.value, o.maxlength, o.classname);
//arr ==> [name, type, value, maxlength, classname]
var arr = new array();
$.each(arrcfg, function(i, n){
if ( $.isarray(n) ) {
arr[i] = n;
} else {
arr[i] = new array();
if ( i === 0 ) {
arr[0].push(n);
}else{
//补全各属性数组(根据name数组长度)
$.each(arr[0], function() {
arr[i].push(n);
});
}
}
//判断各属性数组的长度是否一致
if ( arr[i].length !== arr[0].length ) {
allowed = false;
$container.text(oo.error1);
}
});
if ( allowed ) {
//获取触发器
var $clicker = !o.clicker ? $container.next() : $(o.clicker);
$clicker.bind("click", function() {
//未添加前的组数
var len = $container.children(o.wrap).length;
//定义一个变量,判断是否已经达到上限
var ismax = o.toplimit === 0 ? false : (len < o.toplimit ? false : true);
if ( !ismax ) {//没有达到上限才允许添加
var $item = $("<"+ o.wrap +">").appendto( $container );
$.each(arr[0], function(i) {
switch ( arr[1][i] ) {
case "select"://下拉框
var option = "";
$.each(arr[2][i], function(i, n) {
option += "<option value='"+ n +"'>"+ i +"</option>";
});
$("<select>", {
name: arr[0][i],
classname: arr[4][i]
}).append( option ).appendto( $item );
break;
case "custom"://自定义内容,支持html
$item.append( arr[2][i] );
break;
default://默认是input
$("<input>", {//jquery1.4新增方法
name: arr[0][i],
type: arr[1][i],
value: arr[2][i],
maxlength: arr[3][i],
classname: arr[4][i]
}).appendto( $item );
}
});
$item = $container.children(o.wrap);
//新组数
len = $item.length;
if ( len > 1 ) {
$item.last().append(oo.remove);
if ( len === 2 ) {//超过一组时,为第一组添加“移除”按钮
$item.first().append(oo.remove);
}
}
$item.find(".remove").click(function(){
//移除本组
$(this).parent().remove();
//统计剩下的组数
len = $container.children(o.wrap).length;
if ( len === 1 ) {//只剩一个的时候,把“移除”按钮干掉
$container.find(".remove").remove();
}
//取消“移除”按钮的默认动作
return false;
});
}
//取消触发器的默认动作
return false;
});
//初始化
if ( $.isarray(o.initvalue) ) {//判断初始值是否是数组(必需的)
$.each(o.initvalue, function(i, n) {
if ( !$.isarray(n) ) {
$container.empty().text(oo.error2);
return false;
}else{
if ( n.length !== arr[0].length ) {
$container.empty().text(oo.error1);
return false;
}
}
var arrvalue = new array();
//初始值替换默认值
$.each(n, function(j, m) {
arrvalue[j] = arr[2][j]
arr[2][j] = m;
});
$clicker.click();
//默认值替换初始值
$.each(arrvalue, function(j, m) {
arr[2][j] = m;
});
//上面这种[移形换位法]不知道效率怎么样,我想不出别的更好的方法
});
}else{
$clicker.click();
}
}
}
});
})(jquery);
</script>
</head>
<body>
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<table width="90%" align="center">
<tr>
<td width="10%" align="right"><strong>demo1</strong></td>
<td width="90%">
<ul id="demo1"></ul>
<a href="#">+ 添加</a>
</td>
</tr>
<tr>
<td align="right"><strong>demo2</strong></td>
<td>
<ul id="demo2"></ul>
<a href="#">+ 添加(最多5项)</a>
</td>
</tr>
<tr>
<td align="right"><strong>demo3</strong></td>
<td>
<ul id="demo3"></ul>
<a href="#">+ 添加(最多2项)</a>
</td>
</tr>
<tr>
<td align="right"><strong>demo4</strong></td>
<td>
<ul id="demo4"></ul>
<a href="#">+ 添加</a>
</td>
</tr>
<tr>
<td align="right"><strong>demo5</strong> <sup style="color:#f00;">new</sup></td>
<td>
<ul id="demo5"></ul>
<a href="#">+ 添加</a>
</td>
</tr>
</table>
</body>
</html>
js 动态添加input、select等表单元素代码
时间: 2024-12-23 18:58:18
js 动态添加input、select等表单元素代码的相关文章
php+js处理大量input输入框与表单提交获取问题
近段时间接到一个比较奇葩的需求,对方要求在企业站中加入一个类似word的表单,并供用户在线填写与提交. 仔细看了一下,该表单的字段高达一百多个,这个量级是相当可怕的.如果每个input手动去填写id和name的话,该是一个多么可怕的体力活啊. 反复思考了一下,为避免苦逼的去逐个填写input的id与name,决定用JS配合PHP的方式来解决这个表单一连串的提交工作. 表单组成部分 表单首先按照客户的要求,将需要填写的表格与选项按照word文档的原型进行布局,使其符合用户体验,如下图:
JS动态添加option和删除option(附实例代码)_javascript技巧
1.动态创建select 复制代码 代码如下: function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option 复制代码 代码如下: function addOption(){ //根据id查找对象, var obj=docume
jQuery复制表单元素附源码分享效果演示_jquery
我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 查看演示 下载源码 HTML 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能. 首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script sr
基于jQuery复制表单元素的例子
我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品.表 单数据中新增字段信息等.这个时候我们可以在表单中直接放置一个"新增一项"或"复制"按钮,通过点击按钮即可实现复制表单元素. 本文我们通过实例介绍一款简单的基于jQuery的元素复制插件,通过调用该插件轻松实现元素复制功能.首先载入jQuery库文件和元素复制插件duplicateElement.min.js. <script src="jquery.
使用bootstrapValidator插件进行动态添加表单元素并校验_javascript技巧
一.前言 实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验.在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现.虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很多时间,现在就把解决方法和功能效果图贴出来,希望对大家有所帮助. 思路:动态添加表单元素,并调用bootstrapV
JS动态添加与删除select中的Option对象
本篇文章主要介绍了JS动态添加与删除select中的Option对象(示例代码) 需要的朋友可以过来参考下,希望对大家有所帮助 如下所示: 代码如下: //动态删除select中的所有options: function delAllOptions(){ document.getElementById("user_dm").options.length=0; } //动态删除select中的某一项option: function delOne
用ASP的方法动态写出JavaScript的表单验证的函数checkSubmit()
javascript|表单验证|动态|函数 <%'请转存为CheckForm_JS.asp使用 '*****************************************************************************'函数名称:CheckForm_JS(frmName,errStr)'功能:用ASP的方法动态写出JavaScript的表单验证的函数checkSubmit()'使用方法:1.<!--Include File=URL+本函数所在的页>;'
ASP动态生成的javascript表单验证代码
javascript|表单验证|动态 以网上down了一个ASP动态生成Form验证javascript的代码,自己扩容了一下.作者的大名我给忘了,不过我记得清楚,从第一条至第九条的代码都是该作者的原创.至于九至第十五条却是本人自己加的哦.而且由于本人水平有限,从第九条至第十五条不见得会条条生效啊?呵呵,其实把它贴在这里没有什么必要的,因为这点小会伎俩谁都会用的,我把它的作用定位为:开发时找不到该函数时到这里拷贝一下就可以了.呵,因为我即没有刻录机也没有移动硬盘.实在是没有办法把这些代码随身携带
利用js动态添加删除table行的示例代码
本篇文章主要是对利用js动态添加删除table行的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如下所示: 代码如下: //动态添加行 function addRow(){ var table = document.getElementById("tableID"); var newRow = table.insertRow(); //创建新行 var newCell1 = newRow.insertCell(); //创建新单元格