自己动手制作jquery插件之自动添加删除行功能介绍

这是一个我认为功能基本完善的插件，它包括添加、删除、插入、上下移动、索引标识、 数量控制等功能，基本上能满足大部分多行添加的需求，当然，在完成这些功能的前提下，我也尽量保持较少的代码量和易理解的逻辑性。

这个插件的演示页面是http://www.lovewebgames.com/demo/autoAdd/autoAdd.html ，引用自己动手制作jquery插件之自动添加删除行(上)里的介绍，这是一个简单的插件，它的作用是:一个系统中有大量的需要对一个行进行复制添加，希望能够进行批量的操作时，就可以用这个插件了。

插件效果图如下：

在上篇里已经提到了一些制作jquery插件的基础知识，接下来就是完成这此功能了，我尽量写得吸引人眼球一点，首先，我们要完成最基础的复制行功能，很多人，都偏爱于去拼接html代码，他们觉得这个插件的入口应该是传入一段HTML代码后，你再对这个HTML进行模版复制，我不能说这种做法是错误的，因为它也确实能够完成这项工作，但是如果你要复制的行的代码比较多，又有复杂一点的控件，如存在日历或城市三级菜单等，这样你就很不易维护了，我们做前端的，就是为了让做程序的做更少的事，让用户更快捷方便的体验。所以我尽量不让程序去进行转义拼接代码，把这些工作留给JS，jquery中有个clone(bool)的方法很好用，它有一个

Boolean类型的参数，如果你要完全的复制某个dom对象，包括它上面的事件的话，就可以用clone(true)了，这样也少了再次绑定事件的困绕，所以这个插件的回调方法，其实很难用到。添加行的代码如下：


代码如下:

function addRow(num, isInsert, target) {
for (var i = 0; i < num - count; i++) {
var temp = content.find("." + settings.tempRowClass).first().clone(true);
temp.find("input").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").length > 0) {
temp.find(".ke-container").remove();
}
temp.find(".richText,input").each(function() {
$(this).attr("id", "txt_" + Math.round(Math.random() * new Date().getTime()))
$(this).show();
});
if (isInsert) {
temp.insertBefore(target.closest("." + settings.tempRowClass));
} else {
content.append(temp);
}
}
if (num < count) {
for (var j = count - 1; j >= num; j--) {
delRow(content.find("."+settings.tempRowClass).eq(j));
}
} else {
if (settings.addCallBack)
settings.addCallBack($(temp));
}
count = content.find("." + settings.tempRowClass).length;
settings.changeInput.val(count);
sumIndex();
showhideBtn();
};

大家可能注意到，我在写这些方法的时候，都有在前面调用content然后再查找子集，这个是为了一个页面同时出现多次调用时，出现冲突的办法。

这个插件写到这就基本上算是完成了， 区区百来行代码，就完成了一个我认为不错且实用的小工具，以后调用，就只需要在html里设置相对应的class就行了，多么easy，是否也happy呢？那就不得而知，代码比较粗糙，如有高手，可以帮我改进下，欢迎大家一起探讨，自所谓送人菊花，留有余香，大家加我Q群一起学习进步吧！70210212或77813547.

赞 (0)

相关推荐

  • JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)

    购物车点击可以减少或者添加商品并自动计算价格: 购物车中可能有这样的功能,那就是点击按钮可以实现商品数量的减少或者增加,并且能够实时的计算出总的商品价格,下面就通过代码实例介绍一下如何实现此功能,当然下面的这个模拟实现的购物车难登大雅之堂,但是可以从中得到一些启发或者相关的知识点,代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

  • jquery中插件实现自动添加用户的具体代码

    jquery中插件实现自动添加用户的具体代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv=

  • 自己动手制作jquery插件之自动添加删除行的实现

    自己动手制作jquery插件之自动添加删除行的实现

    效果图如下,演示地址请点击 既然是插件,那就应该可以使用$("div").method({})这样的jquery写法来调用,它的做法是: 复制代码 代码如下: (function($) { })(jQuery); 然后给插件命名: 复制代码 代码如下: $.fn.autoAdd = function(options) {} 这样我们就可以在页面里用$(dom).autoAdd({...}) 来调用这个插件了,接着我们再给它一些特定的参数,比如我们要复制哪一行,要给哪个按钮加上添加.删除

  • jQuery自动添加表单项的方法

    本文实例讲述了jQuery自动添加表单项的方法.分享给大家供大家参考.具体如下: 这里实现通过点击按钮动态添加一个表单输入项 <script type="text/javascript" charset="utf-8"> $(function() { var fieldCount = 1; $("#addFieldButton").click(function() { fieldCount++; if(fieldCount <=

  • jquery实现在页面加载的时自动为日期插件添加当前日期

    在页面加载的时候自动为日期插件添加当前日期. <script type="text/javascript"> $(document).ready(function(){ $("#startTime").val(formatDate()); $("#endTime").val(formatDate()); } jsp页面的body部分代码: <td><label>日期:</label></td&

  • jquery 结合C#后台的数组对文章的关键字自动添加链接的代码

    当我们需要在后台读取多个关键字时,我们可以先把后台的数据库读取到一个数组中(在数据库添加多个关键词时用","隔开): 复制代码 代码如下: public string[] str; //添加一个公共数组一遍jquery调用 protected void Page_Load(object sender, EventArgs e) { string str1 = 读取数据库的关键词; str=str1.Split(','); } 页面的JQuery: <html s> <

  • 自己动手制作jquery插件之自动添加删除行功能介绍

    自己动手制作jquery插件之自动添加删除行功能介绍

    这是一个我认为功能基本完善的插件,它包括添加.删除.插入.上下移动.索引标识. 数量控制等功能,基本上能满足大部分多行添加的需求,当然,在完成这些功能的前提下,我也尽量保持较少的代码量和易理解的逻辑性. 这个插件的演示页面是http://www.lovewebgames.com/demo/autoAdd/autoAdd.html ,引用自己动手制作jquery插件之自动添加删除行(上)里的介绍,这是一个简单的插件,它的作用是:一个系统中有大量的需要对一个行进行复制添加,希望能够进行批量的操作时,

  • Bootstrap3使用typeahead插件实现自动补全功能

    Bootstrap3使用typeahead插件实现自动补全功能

    很酷的一个自动补全插件 http://twitter.github.io/typeahead.js 在bootstrap中使用typeahead插件,完成自动补全 相关的文档:https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md 数据源: Local:数组 prefectch:json remote等方式 -----------------------------------------------

  • jquery实现邮箱自动填充提示功能

    jquery实现邮箱自动填充提示功能

    邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 核心代码(需要jquery的支持): (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "mailListBox", //外部box样式 listClass: "

  • 利用JQuery实现datatables插件的增加和删除行功能

    利用JQuery实现datatables插件的增加和删除行功能

    在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>zengjia he shancu </title> <meta charset="utf-8" /> <script src=&quo

  • 基于jquery实现的自动补全功能

    本文实例讲述了基于jquery实现的自动补全功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $(function() {     // 自动补全     var maxcount = 0;// 表示他最大的值     var thisCount =0;// 初始化他框的位置     $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; pos

  • jquery插件方式实现table查询功能的简单实例

    1. 写插件部分,如下: ;(function($){ $.fn.plugin = function(options){ var defaults = { //各种属性,各种参数 } var options = $.extend(defaults, options); this.each(function(){ //功能代码 var _this = this; }); } })(jQuery); 附上一个例子: ;(function($){ $.fn.table = function(optio

  • JS/jQuery实现超简单的Table表格添加,删除行功能示例

    本文实例讲述了JS/jQuery实现超简单的Table表格添加,删除行功能.分享给大家供大家参考,具体如下: 最近需要表格添加删除行,添加行简单,删除行就有点儿懵逼了,于是网上找实例,功夫不负有心人,终于让我找到了,下面的是代码,大家觉得可以,记得点赞哦!!!谢谢! 需要的拿去,转载请在明显的位置标注出出处!!! <html> <head> <title>table添加/删除行</title> </head> <body> <t

  • jQuery easyui datagird编辑行删除行功能的实现代码

    神马是easyui jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签. jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,validatebox,window等等. 下面通

  • 一步一步制作jquery插件Tabs实现过程

    tabs是现在网页应用最广的一种效果,jquery插件和非jquery插件也有不少,有一些朋友问我怎么用jquery.ui.tabs的ajax怎么只请求服务器一次原来我想其实很简单,看看官方的API就了解,不过我在回复这些朋友之前,用firebug查看了官方的ui.tabs发现,声明了ajax缓存,每点一个tabs时,仍然会有服务器请求这应该是服务器缓存,而不是实际上我们要求的只ajax一次,不再请求服务器了接下来我找了一下其它的tabs插件,基本上没有符合要求的,不是太庞大就是太简单,太过庞大

随机推荐