自己动手制作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 相关文章推荐
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
JavaScript中的函数式编程详解
Aug 22 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
提问的智慧
2006/10/09 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
Yii2中Restful API原理实例分析
2016/07/25 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
简单介绍Python中的struct模块
2015/04/28 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
元宵晚会主持词
2014/03/25 职场文书
银行进社区活动总结
2014/07/07 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
大学校园招聘会感想
2015/08/10 职场文书