jquery插件自动增删行功能介绍

这是一个我认为功能基本完善的插件。它包括添加、删除、插入、上下移动、索引和数量控制等功能。基本可以满足大部分多线添加的需求。当然，在完成这些功能的前提下，我也尽量少保留代码和通俗易懂的逻辑。这个插件的演示页面是http://www.lovewebgames.com/demo/autoAdd/autoAdd.html.请参考自己做的jquery插件的自动增删行中的介绍(第一部分)。这是一个简单的插件。它的功能是在：中复制添加一行。当您想要进行批处理操作时，可以使用这个插件。插件渲染如下：。

在前一篇文章中，我已经提到了一些制作jquery插件的基础知识。下一步是完成这个功能。我尽量让它引人注目。首先，我们要完成最基本的抄线功能。很多人更喜欢拼接html代码。他们认为这个插件的入口应该是在复制HTML模板之前传入一段HTML代码。我不能说这是错的。因为它确实可以完成这项工作，但是如果你想复制更多的代码行，有更复杂的控件，比如日历或者城市三级菜单，你就很难维护了。我们做前端工作只是为了让程序员少做点事，让用户体验更快更方便。所以我尽量不让程序转义和拼接代码，把这项工作留给JS。jquery中有一个非常有用的clone(bool)方法。它有一个布尔参数。如果想要完全复制一个dom对象，包括它上面的事件，可以使用clone(true)，这样可以减少再次绑定事件的麻烦。所以这个插件的回调方法其实很难用。添加行的代码如下：复制代码如下：函数addrow (num，is insert，target){ for(var I=0；我数了数；i ) { var temp=content.find(' . 'settings.tempRowClass)。第一个()。克隆(真)；temp.find('输入')。val(“”)；temp.find('select ')。val('-1 ')；temp.find('textarea ')。val(“”)；temp.find(':checkbox ')。attr('checked '，false)；temp.attr('id '，' ')；temp.find('input，tr，textarea，select，checkbox，tbody ')。attr('id '，' ')；if (temp.find('。richText ')。长度0) { temp.find('。ke-container’)。移除()；} temp.find('。richText，input ')。每个(函数(){ $(this))。attr('id '，' txt _ ' math . round(math . random()* new Date()。getTime())) $(this)。show()；});if(is insert){ temp . insert before(target . closer(' . ')settings . TempRowClass))；} else { content . append(temp)；} } if(num count){ for(var j=count-1；j=numj - ) { delRow(content.find(' . 'settings.tempRowClass)。方程式(j))；} } else { if(settings . addcallback)settings . addcallback($(temp))；} count=content.find(' . 'settings.tempRowClass)。长度；settings.changeInput.val(计数)；sumIndex()；showhideBtn()；};正如您可能注意到的，当我编写这些方法时，我总是先调用内容，然后寻找子集。这是针对一个页面同时被多次调用时的冲突。这个插件基本写完了。只写了一百行代码，就完成了一个我觉得不错又实用的小工具。如果以后调用它，只需要在html中设置相应的类。多容易，幸福吗？我不知道，但代码很粗糙。如果你有高手，可以帮我提高。欢迎大家一起讨论。既然所谓送花留余香，那就加我Q群一起学习进步吧！7210212或77813547。