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


Posted in Javascript onOctober 14, 2011

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

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

     插件效果图如下:

 

自己动手制作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.

Javascript 相关文章推荐
javascript不同页面传值的改进版
Sep 30 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
JavaScript之promise_动力节点Java学院整理
Jul 03 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 #Javascript
获取body标签的两种方法
Oct 13 #Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 #Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 #Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 #Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 #Javascript
Javascript insertAfter() 实现函数代码
Oct 12 #Javascript
You might like
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
PHP 手机归属地查询 api
2010/02/08 PHP
PHP开发负载均衡指南
2010/07/17 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
js实现导航跟随效果
2018/11/17 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
python制作简单五子棋游戏
2019/06/18 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
促销活动总结范文
2014/04/30 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
婚内分居协议书范文
2014/11/26 职场文书
为自己工作观后感
2015/06/11 职场文书
小学毕业感言100字
2015/07/30 职场文书
教学副校长工作总结
2015/08/13 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python