jquery动态添加input ——随笔记录

最新推荐文章于 2021-12-07 13:29:08 发布

qq19930130

最新推荐文章于 2021-12-07 13:29:08 发布

阅读量934

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/chenqingqing9301/article/details/38382495

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Jquery 动态添加input

这个是我在做项目的时候，遇到的问题，想做一个效果，通过网上搜寻，找到的方法，希望大家可以借鉴。

html：

<!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 http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="robots" content="all" />
<meta name="BaiduSpider" content="all" />
<meta name="Googlebot" content="all" />
<meta name="revisit-after" content="1 days" />
<meta name="author" content="wo_is神仙, MrZhang.net, IlikejQuery.com" />
<meta name="keywords" content="动态添加input, jQuery, 插件, asp-cwb!" />
<meta name="description" content="我的第三个jQuery插件，请多指教。" />
<title>addInput - 动态添加input</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; }
table { border-collapse:collapse; border-spacing:0; }
td { margin:0; padding:10px; border:1px solid #ccc; }
</style>
<script type="text/javascript" src="jquery14.js"></script>
<script type="text/javascript" src="jquery.addInput.js"></script>
<script type="text/javascript">
$(function(){
$("#demo1").addinput();//最简单的应用
$("#demo2").addinput({
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").addinput({
name: "demo3",
toplimit: 2,
initValue: [
["初始值3-1"],//必须是数组，就算每组只有一个input
["初始值3-2"],
["初始值3-3"]//小三儿，别想蒙混过关，总管只允许添加两组
]
});
});
</script>
</head>

<body>
<h1 style="text-align:center;">具体配置方法请查看源代码</h1>
<table width="80%" 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>
</table>
</body>
</html>

jquery.addInput.js：

;(function($){
$.fn.extend({
"addinput": function(o){
o = $.extend({
clicker: null, //点击开关，可以根据class（或id）选择，默认.next()获取
wrap: "li", //input的父标签
name: "i-text", //input的name
type: "text", //input的type，默认text型
value: "", //input的value
maxlength: 20, //input的maxlength，默认20
className: null, //input的className
toplimit: 0, //新增input的上限，0表示不限制
initValue: null //初始化添加的input的value值，必须是数组。用于修改某资料时显示已有的数据
}, o || {});
//定义一个变量存储容器
var $container = $(this);
var i, len;

//name数组化
var arrName = new Array();
if ( $.isArray(o.name) ) {
arrName = o.name;
} else {
arrName.push(o.name);
}
var nLen = arrName.length;

//type数组化
var arrType = new Array();
if ( $.isArray(o.type) ) {
arrType = o.type;
} else {
//补全type数组（根据name数组长度）
for ( i = 0; i < nLen; i++ ) {
arrType.push(o.type);
}
}
var tLen = arrType.length;

//value数组化
var arrValue = new Array();
if ( $.isArray(o.value) ) {
arrValue = o.value;
} else {
//补全value数组（根据name数组长度）
for ( i = 0; i < nLen; i++ ) {
arrValue.push(o.value);
}
}
var vLen = arrValue.length;

//maxlength数组化
var arrMaxlength = new Array();
if ( $.isArray(o.maxlength) ) {
arrMaxlength = o.maxlength;
} else {
//补全maxlength数组（根据name数组长度）
for ( i = 0; i < nLen; i++ ) {
arrMaxlength.push(o.maxlength);
}
}
var mLen = arrMaxlength.length;

//class数组化
var arrClass = new Array();
if ( $.isArray(o.className) ) {
arrClass = o.className;
} else {
//补全class数组（根据name数组长度）
for ( i = 0; i < nLen; i++ ) {
arrClass.push(o.className);
}
}
var cLen = arrClass.length;

var oo = {
remove: "<a href=\"#nogo\" class=\"remove\">移除</a>",
error1: "参数配置错误，数组的长度不一致，请检查。",
error2: "参数配置错误，每组初始化值都必须是数组，请检查。"
}

//定义一个变量，判断各数组长度是否一致（必需的）
var allowed = nLen != tLen || nLen != vLen || nLen != mLen || nLen != cLen ? false : true
if ( !allowed ) {//如果不一致...
$container.text(oo.error1);
return false;
}else{
//获取点击开关
var $Clicker = !o.clicker ? $container.next() : $(o.clicker);
$Clicker.bind("click", function() {
//未添加前的组数
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 );
//根据name数组的长度添加input
for ( i=0; i<nLen; i++ ) {
$("<input>", {//jQuery1.4新增方法
name: arrName[i],
type: arrType[i],
value: arrValue[i],
maxlength: arrMaxlength[i],
className: arrClass[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;
}
//新增一组默认input
$Clicker.click();
//获取本次新增的组
$Item = $container.children(o.wrap).eq(i);
$.each(n, function(j, m) {
//循环调整input的value值
$Item.children("input").eq(j).attr("value", m);
});
});
}else{
//没有设置初始化，新增一组默认input
$Clicker.click();
}
}
}
});
})(jQuery);