自己動手制作jquery插件之自動添加刪除行的實現(xiàn)
更新時間：2011年10月13日 23:30:20 作者：
我們常常會遇到這樣的情況，一個系統(tǒng)中有大量的需要對一個行進(jìn)行復(fù)制添加，希望能夠進(jìn)行批量的操作，這個時候，我們就可以考慮把它做成一個jquery插件了.
效果圖如下，演示地址請點擊
既然是插件，那就應(yīng)該可以使用$("div").method({})這樣的jquery寫法來調(diào)用，它的做法是:
(function($) {
})(jQuery);
然后給插件命名:
這樣我們就可以在頁面里用$(dom).autoAdd({...}) 來調(diào)用這個插件了，接著我們再給它一些特定的參數(shù)，比如我們要復(fù)制哪一行，要給哪個按鈕加上添加、刪除的功能，這些我都使用class來標(biāo)識;
var settings = { changeInput: $("#input"), tempRowClass: "tempRow", min: 1, max: 90, addButtonClass: "addbtn", delButtonClass: "delbtn", addCallBack: null, delCallBack: null, indexClass: "index", insertClass: "insertbtn", moveUpClass: "moveupbtn", moveDownClass: "movedownbtn" };
if (options) $.extend(settings, options);
看起來有點長，實際沒什么，也許你突然想加個鼠標(biāo)移上去樣式了，也可以繼續(xù)往后加，這里我都給定了一些默認(rèn)值，方便調(diào)用。解釋下這些變量的意思先吧，changeInput,是我加的一個文本框，我希望輸入多少的數(shù)字，就出現(xiàn)多少行，temRowClass就是我要復(fù)制的模版行，后面的就很好理解了；
由于時間關(guān)系，今天就到這吧，明天會詳細(xì)說明這些功能是如何實現(xiàn)的。
既然是插件，那就應(yīng)該可以使用$("div").method({})這樣的jquery寫法來調(diào)用，它的做法是:
復(fù)制代碼 代碼如下:
(function($) {
})(jQuery);
然后給插件命名:
復(fù)制代碼 代碼如下:
$.fn.autoAdd = function(options) {}
這樣我們就可以在頁面里用$(dom).autoAdd({...}) 來調(diào)用這個插件了，接著我們再給它一些特定的參數(shù)，比如我們要復(fù)制哪一行，要給哪個按鈕加上添加、刪除的功能，這些我都使用class來標(biāo)識;
復(fù)制代碼 代碼如下:
var settings = { changeInput: $("#input"), tempRowClass: "tempRow", min: 1, max: 90, addButtonClass: "addbtn", delButtonClass: "delbtn", addCallBack: null, delCallBack: null, indexClass: "index", insertClass: "insertbtn", moveUpClass: "moveupbtn", moveDownClass: "movedownbtn" };
if (options) $.extend(settings, options);
看起來有點長，實際沒什么，也許你突然想加個鼠標(biāo)移上去樣式了，也可以繼續(xù)往后加，這里我都給定了一些默認(rèn)值，方便調(diào)用。解釋下這些變量的意思先吧，changeInput,是我加的一個文本框，我希望輸入多少的數(shù)字，就出現(xiàn)多少行，temRowClass就是我要復(fù)制的模版行，后面的就很好理解了；
由于時間關(guān)系，今天就到這吧，明天會詳細(xì)說明這些功能是如何實現(xiàn)的。
相關(guān)文章
上文介紹了利用$函數(shù)篩選頁面上的元素和替代onload事件。$函數(shù)還有一個作用，當(dāng)它的參數(shù)是一個HTML片段的時候，它返回的是包含這個HTML元素的包裝集。2010-03-03
這篇文章主要為大家詳細(xì)介紹了jquery.jsPlumb實現(xiàn)拓?fù)鋱D，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
jQuery實現(xiàn)鼠標(biāo)移入顯示蒙版效果
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)鼠標(biāo)移入顯示蒙版效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI表單驗證
輕松學(xué)習(xí)jQuery插件EasyUI，本文的重點在于EasyUI表單驗證，并告訴大家如何提交表單，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了jQuery實現(xiàn)切換字體大小的方法,實例分析了jQuery操作字體css樣式的技巧,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery實現(xiàn)ajax無刷新分頁頁碼控件,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了jQuery中:checkbox選擇器用法,實例分析了:checkbox選擇器的功能、定義及匹配復(fù)選框的使用技巧,需要的朋友可以參考下2015-01-01
本文給大家介紹的是使用jQuery實現(xiàn)仿路邊燈箱廣告圖片輪播切換特效，效果非常棒，有需要的小伙伴可以參考下。2015-04-04
JQuery 應(yīng)用 JQuery.groupTable.js
在以往的項目中，數(shù)據(jù)瀏覽用的都table 的形式展現(xiàn)。如下圖1， 這是一個很常見的表格。通常對分類的字段先進(jìn)行排序。為了讓分類表現(xiàn)的更直觀。2010-12-12
有時我們需要動態(tài)的展示訪問次數(shù)、下載次數(shù)等效果，我們可以借助jQuery結(jié)合后臺php實現(xiàn)一個滾動的數(shù)字展示效果。2015-08-08