自己動手制作jquery插件之自動添加刪除行的實現
更新時間：2011年10月13日 23:30:20 作者：
我們常常會遇到這樣的情況，一個系統(tǒng)中有大量的需要對一個行進行復制添加，希望能夠進行批量的操作，這個時候，我們就可以考慮把它做成一個jquery插件了.
效果圖如下，演示地址請點擊
既然是插件，那就應該可以使用$("div").method({})這樣的jquery寫法來調用，它的做法是:
(function($) {
})(jQuery);
然后給插件命名:
這樣我們就可以在頁面里用$(dom).autoAdd({...}) 來調用這個插件了，接著我們再給它一些特定的參數，比如我們要復制哪一行，要給哪個按鈕加上添加、刪除的功能，這些我都使用class來標識;
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);
看起來有點長，實際沒什么，也許你突然想加個鼠標移上去樣式了，也可以繼續(xù)往后加，這里我都給定了一些默認值，方便調用。解釋下這些變量的意思先吧，changeInput,是我加的一個文本框，我希望輸入多少的數字，就出現多少行，temRowClass就是我要復制的模版行，后面的就很好理解了；
由于時間關系，今天就到這吧，明天會詳細說明這些功能是如何實現的。
既然是插件，那就應該可以使用$("div").method({})這樣的jquery寫法來調用，它的做法是:
復制代碼 代碼如下:
(function($) {
})(jQuery);
然后給插件命名:
復制代碼 代碼如下:
$.fn.autoAdd = function(options) {}
這樣我們就可以在頁面里用$(dom).autoAdd({...}) 來調用這個插件了，接著我們再給它一些特定的參數，比如我們要復制哪一行，要給哪個按鈕加上添加、刪除的功能，這些我都使用class來標識;
復制代碼 代碼如下:
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);
看起來有點長，實際沒什么，也許你突然想加個鼠標移上去樣式了，也可以繼續(xù)往后加，這里我都給定了一些默認值，方便調用。解釋下這些變量的意思先吧，changeInput,是我加的一個文本框，我希望輸入多少的數字，就出現多少行，temRowClass就是我要復制的模版行，后面的就很好理解了；
由于時間關系，今天就到這吧，明天會詳細說明這些功能是如何實現的。
相關文章
為了防止以后好久不用生疏，在這里記下，供剛開始學習jquery的童鞋們借鑒，我也是剛開始學jquery，有什么寫的不對的地方，還請大家指出錯誤，共同進步。2011-08-08
jquery其實是有個進度條插件的，叫做jqueryprogressbar.js，可是想練習一下，就沒有用，自己寫了點代碼。這個代碼其實是參考別人的，因為自己的JS基礎不是很好。2010-03-03
這篇文章主要介紹了利用瀏覽器全屏api實現js全屏的代碼示例,示例中使用了jquery，把這個庫的地址改成自己的，大家參考使用吧2014-01-01
鼠標點擊聚焦，地圖定位，在圖片上突出顯示，焦點定位頁面元素，這些都是在系統(tǒng)開發(fā)是經常需要用到的，下面為大家介紹下具體的實現，感興趣的朋友可以參考下哈2013-06-06
jQuery使用ajax傳遞json對象到服務端及contentType的用法示例
這篇文章主要介紹了jQuery使用ajax傳遞json對象到服務端及contentType的用法,結合實例形式分析了jQuery使用ajax傳遞json對象數據及服務器響應相關操作技巧,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了jQuery ajax時間差導致的變量賦值問題,結合實例對比分析了jQuery的ajax調用中出現的時間差賦值問題原因與解決方法,需要的朋友可以參考下2016-01-01
在用jquery加ajax寫的時候，發(fā)現如果傳進去的數據包含&則無法獲取數據而+號的話就會被判定為空，解決辦法就是使用encodeURIComponent()函數對要發(fā)送的數據進行編碼,需要的朋友可以參考下2017-01-01
jquery 注意事項與常用語法小結,學習jquery的朋友最好收藏下。2010-06-06
本文給大家匯總了2014年最熱門的9款jQuery特效插件，小伙伴們根據自己的需求直接帶走吧。2014-12-12
jQuery function想必大家都不會陌生，web前端開發(fā)人員經常會接觸到，下面為大家介紹下它的正確書寫方法，感興趣的朋友可以參考下2013-08-08