jquery實現輸入框動態增減的實例代碼
<!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特效，提供高質量廣告代碼下載javascript
,盡在站長特效網" />
<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數組的長度就是每組inputcss
的個數。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;\">類型：html
</strong>", { '理論': '1', '技能': '2', '上機': '3' }],
initValue: [
["<strong style=\"color:#ff7b0e;\">科目：</strong>", "初始值5-1", "<strong style=\"color:#ff7b0e;\">java
類型：</strong>", { '理論a': '1', '技能a': '2', '上機a': '3' }],
["<strong style=\"color:#ff7b0e;\">科目：</strong>", "初始值5-1", "<strong style=\"color:#ff7b0e;\">jquery
類型：</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 +"'>"+ iapp
+"</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>ui
- 1. jquery實現動態添加html代碼
- 2. vue.js 實現輸入框動態添加
- 3. jQuery實現input框輸入值動態搜索
- 4. LayUI+JQuery實現動態表單（搜索條件的動態增減）
- 5. jQuery實現自動左右滾動效果的代碼實例
- 6. jQuery實現輸入框功能
- 7. java輸入輸出流實例代碼
- 8. js輸入框郵箱自動提示功能代碼實現
- 9. 通過cloneya無刷新動態添加或減少多個input輸入框前後臺代碼實現
- 10. jQuery實現上下無縫滾動代碼實例
- 更多相關文章...
- • Spring JDK動態代理（附帶實例） - Spring教程
- • Spring CGLlB動態代理（附帶實例） - Spring教程
- • ☆基於Java Instrument的Agent實現
- • Java Agent入門實戰（二）-Instrumentation源碼概述
-
每一个你不满意的现在，都有一个你没有努力的曾经。