jquery实现输入框动态增减的实例代码
2019独角兽企业重金招聘Python工程师标准>>> 
<!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>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载
,尽在站长特效网" />
<title>网页特效 动态添加的文本框和下拉框效果 站长特效网</title>
<style type="text/css">
body { font:12px/1.5 tahoma, arial, \5b8b\4f53, 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-collapse:collapse; border-spacing:0; }
td { margin:0; padding:10px; border:1px solid #ccc; }
</style>
<script src="http://www.yedushu.com/scripts/jquery/jquery-1.11.3.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", "demo41", "demo42", "demo43", "demo44", "demo45"],
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
*
* @Depend jQuery 1.4+
**///欢迎来到站长特效网，我们 的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码
下载。
;(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();
}
}
}
});//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好 记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多
广告代码下载。
})(jQuery);
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓
站-->
<script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script>需要加载js文件，请刷新后看效果。<br />
<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>
转载于:https://my.oschina.net/u/2444569/blog/704955
jquery实现输入框动态增减的实例代码相关推荐
- jquery实现输入框动态增减
2019独角兽企业重金招聘Python工程师标准>>> 主要功能是动态增减输入框,而且支持对各个输入框的检测. 每个输入框在输入内容后,对其进行错误提示 最后通过字符串拼接,将所有的 ...
- java 三级菜单栏的添加_[Java教程]jquery实现的三级导航菜单实例代码
[Java教程]jquery实现的三级导航菜单实例代码 0 2016-01-02 15:00:02 jquery实现的三级导航菜单实例代码: 使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜 ...
- vue2.0中组建里面套用组件_vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码...
具体代码如下所示: document var aaa=vue.extend({//继承出来一个vue类aaa template:' 我是标题3 ' }); var a=new aaa();//a跟vm ...
- jquery 下拉菜单 html,jQuery实现下拉菜单的实例代码
基本效果是这样的~~ * { margin: 0; padding: 0; } ul { list-style: none; } .wrap { width: 330px; height: 30px; ...
- html tab与jQuery,使用jquery实现div的tab切换实例代码
jQuery实现Tab切换 接触jQ不久以前的js代码来写的简单效果现在用jQ来写: HTML代码: 最新评论近期热评随机文章 1234567890-1 1234567890-2 1234567890 ...
- C语言开发数字华容道实现,jQuery实现数字华容道小游戏(实例代码)
数字华容道 *{ padding: 0px; margin: 0px; } #btns>button{ width: 100px; height: 30px; border: none; bac ...
- html转换英文时间格式,JavaScript(jQuery)打印英文格式日期的实例代码
格式要求(例):On Friday, July 14, 2017 我的思路是用js就可以实现了,具体代码如下: 1 2 3 4 5 6 7 8 index 9 10 Hello, world! 12 ...
- 验证邮箱格式html代码,jquery验证邮箱格式是否正确实例讲解
我们来看看都有哪些邮箱: 我们如果一个个的邮箱进行判断,显然是不可能的了. -个完整的Internet邮件地址由以下两个部分组成,格式如下:登录名@主机名.域名中间用-个表示"在" ...
- 使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
最新文章
- 在哪里能找到最后的版本的示例程序？ AI Studio-MNIST
- Oracle怎样创建共享文件夹,Oracle vm要如何使用共享文件夹的解决方法
- linux 设备管理工具 udev 规则编写
- namespace命名空间的理解C++
- 【线上直播】Xilinx低延时、高质量实时视频服务技术实践
- 字体图标 —— IconMoon
- 谁能制约云厂商滥用开源，谁来帮助开源软件作者？
- java的程序编码_Java 程序编码规范(初学者要牢记)
- cookie and session
- Utility Lambda
- Word如何使用预设样式、自定样式以及生成自动目录教程
- java swing choice_Java-GUI基础（三）java.swing
- Elasticsearch高级（Shards、高可用集群搭建）
- Mac地址多少位（48位的（6个字节）） IP多少位
- 网站被篡改导致百度快照被劫持跳转到博彩页面的解决办法
- 【总结】1111- 如何搞定Banner背景自动换色的功能？
- 【功能测试】part2
- 【洛谷 P7299】 【并查集】 Dance Mooves S
- yolov7利用onnx进行推理同时调用usb摄像头
- Linux上类似vbs脚本,VBS脚本常用经典代码收集