自己動手制作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)文章
jquery學(xué)習(xí)筆記 用jquery實現(xiàn)無刷新登錄
為了防止以后好久不用生疏，在這里記下，供剛開始學(xué)習(xí)jquery的童鞋們借鑒，我也是剛開始學(xué)jquery，有什么寫的不對的地方，還請大家指出錯誤，共同進(jìn)步。2011-08-08
jquery其實是有個進(jìn)度條插件的，叫做jqueryprogressbar.js，可是想練習(xí)一下，就沒有用，自己寫了點代碼。這個代碼其實是參考別人的，因為自己的JS基礎(chǔ)不是很好。2010-03-03
這篇文章主要介紹了利用瀏覽器全屏api實現(xiàn)js全屏的代碼示例,示例中使用了jquery，把這個庫的地址改成自己的，大家參考使用吧2014-01-01
jquery點擊頁面任何區(qū)域?qū)崿F(xiàn)鼠標(biāo)焦點十字效果
鼠標(biāo)點擊聚焦，地圖定位，在圖片上突出顯示，焦點定位頁面元素，這些都是在系統(tǒng)開發(fā)是經(jīng)常需要用到的，下面為大家介紹下具體的實現(xiàn)，感興趣的朋友可以參考下哈2013-06-06
jQuery使用ajax傳遞json對象到服務(wù)端及contentType的用法示例
這篇文章主要介紹了jQuery使用ajax傳遞json對象到服務(wù)端及contentType的用法,結(jié)合實例形式分析了jQuery使用ajax傳遞json對象數(shù)據(jù)及服務(wù)器響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
jQuery ajax時間差導(dǎo)致的變量賦值問題分析
這篇文章主要介紹了jQuery ajax時間差導(dǎo)致的變量賦值問題,結(jié)合實例對比分析了jQuery的ajax調(diào)用中出現(xiàn)的時間差賦值問題原因與解決方法,需要的朋友可以參考下2016-01-01
在用jquery加ajax寫的時候，發(fā)現(xiàn)如果傳進(jìn)去的數(shù)據(jù)包含&則無法獲取數(shù)據(jù)而+號的話就會被判定為空，解決辦法就是使用encodeURIComponent()函數(shù)對要發(fā)送的數(shù)據(jù)進(jìn)行編碼,需要的朋友可以參考下2017-01-01
jquery 注意事項與常用語法小結(jié),學(xué)習(xí)jquery的朋友最好收藏下。2010-06-06
本文給大家匯總了2014年最熱門的9款jQuery特效插件，小伙伴們根據(jù)自己的需求直接帶走吧。2014-12-12
jQuery function想必大家都不會陌生，web前端開發(fā)人員經(jīng)常會接觸到，下面為大家介紹下它的正確書寫方法，感興趣的朋友可以參考下2013-08-08