这次给大家带来jQuery插件实现表格隔行变色并且与鼠标进行交互，jQuery插件实现表格隔行变色并且与鼠标进行交互的注意事项有哪些，下面就是实战案例，一起来看一下。
表格隔行变色且鼠标滑过高亮显示 table{border-collapse:collapse;border:none;width:20%;}table tr td{border:1px solid #ccc;text-align:center;cursor:pointer;}.evenRow{background:#f0f0f0;}.oddRow{background:#ff0;}.activeRow{background:#f00;color:#fff;}/** tableUI 0.1* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示* Dependence jquery-1.7.1.js*/ ;(function($){ $.fn.tableUI = function(options){ //经常用options表示有许多个参数 //各种属性、参数 创建一些默认值，拓展任何被提供的选项 var defaults = { evenRowClass:"evenRow", oddRowClass:"oddRow", activeRowClass:"activeRow" }; var obj = $.extend(defaults,options); this.each(function(){ //this关键字代表了这个插件将要执行的jQuery对象 此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。 $(this)等同于 $($('#element')); //插件实现代码 var thisTable = $(this); //获取当前对象 此时this关键字代表一个DOM元素 我们可以alert打印出此时的this代表的是object HTMLTableElement //添加奇偶行颜色 $(thisTable).find("tr:even").addClass(obj.evenRowClass); $(thisTable).find("tr:odd").addClass(obj.oddRowClass); //添加活动行颜色 $(thisTable).find("tr").mouseover(function(){ $(this).addClass(obj.activeRowClass); }); $(thisTable).find("tr").mouseout(function(){ $(this).removeClass(obj.activeRowClass); }); }); };})(jQuery);//在这个封闭程序中，我们可以无限制的使用$符号来表示jQuery函数。
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
jquery动态操作表格行
jQuery实现表格隔行变色与鼠标滑过高亮（附代码）
以上就是jQuery插件实现表格隔行变色并且与鼠标进行交互的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2768925.html
