jQuery实现表格隔行变色与鼠标滑过高亮（附代码）

这次给大家带来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函数。

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

jquery操作对象数组元素方法总结（附案例）

grep()方法实现数组过滤筛选

以上就是jQuery实现表格隔行变色与鼠标滑过高亮（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！