关于jquery中动态增减控件的一些想法和小插件

去年做项目的时候遇到了一个模块，需要能够动态增减控件。最初，第一个解决方案是使用UpdatePanel在本地更新页面。因为页面很大，控件很多，所以动态添加很多控件的时候会变得很慢。后来想到用javascript作为动态增减控件，最后在提交页面的时候收集页面控件的数据，非常有效。但是因为当时只是针对那个模块做的，扩展性非常差，而且当时编写javascript代码非常复杂，仅仅为了动态增减效果，就写了500多行javascript代码。后来去年底有空的时候，我重写了这段代码。现在这个代码压缩到100行，很容易扩展，控件的数量也很容易增减。使用起来非常简单。效果图：

一个简单的例子： 复制代码代码如下：可扩展标记语言版本='1.0 '编码='iso-8859-1 '？html标题/标题脚本语言=' JavaScript ' src=' http : jquery-1。4 .2 .量滴js /脚本脚本语言=' JavaScript ' src=' http :动态addremove。js /脚本脚本语言=' JavaScript ' $(function(){ $(' table ')).dynamicAddRemover()；});/脚本/头体表tr TD选择选项值='沃尔沃'沃尔沃/选装件值='北京汽车股份有限公司'北京汽车股份有限公司/选项值='欧宝'欧宝/选装件值=' Audi ' Audi/option/select输入类型=' Text '名称=' Text 1 ' id=' Text 1 '值=' Text '/输入按钮类型=' Button '名称=' BTN 1 '值=' BTN 1 ' id=' BTN 1 '按钮/按钮/TD/tr/表格/正文/html加了限制个数事件后的例子：复制代码代码如下：可扩展标记语言版本='1.0 '编码='iso-8859-1 '？html标题/标题脚本语言=' JavaScript ' src=' http : jquery-1。4 .2 .量滴js /脚本脚本语言=' JavaScript ' src=' http :动态addremove。js /脚本脚本语言=' JavaScript ' $(function(){ $(' # table 1 ')).dynamicAddRemover({ addedevent :函数(newCtl，options){//清除文本框. newCtl.find(':text ').val(" ")；if($(“table”).size()5){//隐藏添加按钮新ctl。find(' img[id $='选项。adderid ' ']').hide()；} }，removedevent :函数(prev CTL，nextCtl，options){ if($('table ').size()=5){//显示添加按钮$(“最后一张表：”).find(' img[id $='选项。adderid ' ']').show()；} } });});/script/head body table id=' table 1 ' tr TD select option value=' Volvo ' Volvo/option value=' Saab ' Saab/option value=' Opel ' Opel/option value=' Audi ' Audi/option/select input type=' Text ' name=' Text 1 ' id=' Text 1 ' value=' Text '/input Button ' name=' BTN 1 ' value=' BTN 1 ' id=' BTN 1 ' Button/Button/TD/tr/table/body/html参数的定义：复制代码代码如下：根包装器默认值："表"根容器，就是需要增减的控件的根容器，目前代码上仅仅支持桌子根容器adderId default:'imgExpBtn '增加按钮的身份证。移除默认值： ' IMgcolbtn '删除按钮的身份证。添加事件默认值：完整在增加事件之前所触发的自定义事件，参数为新包装和选项，新包装为新增的控件的父容器，选项为参数列表自己添加事件默认值：完整在增加事件之后所触发的自定义事件，参数为新包装和选项，新包装为新增的控件的父容器，选项为参数列表自己移除事件默认值：完整在删除事件之前所触发的自定义事件，参数为refWrapper和选项，重写器为被删除的控件的父容器，选项为参数列表自己removedEvent default:null在删除事件之后所触发的自定义事件，参数为上一个包装，下一个包装和选项，预包装为被删除的父容器的上一个容器，下一个包装为被删除的父容器的下一个容器、选项为参数列表自己collapseImgUrl默认为： ' icon _ collapse。gif '增加按钮的路径expandImgUrl默认为： ' icon _ expand。gif '删除按钮的路径注意事项：可以添加在增减过程中需要的自定义参数和变量，如：$(“表”).dynamicAddRemover({ param 1: ' param 1 '，param 2: ' param 2 ' })；使用时，如：选项。参数一等等。根容器必须有唯一身份且指定时必须唯一。如果有多个模块（多个根容器)需要使用可以这样：$('#table1 ').dynamicAddRemover()，$('#table2 ').dynamicAddRemover()等等。新添加的控件里的身份和名字并没有更新，如果有特别业务需要，请在添加事件里添加生成新身份的业务逻辑。本插件需要Jquery 1.2.6版本以上支持。源代码和原理很简单，仅仅作为一个抛砖引玉的作用。以下是包括源代码的附件。dynamicAddRemover.rar