该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。

此插件旨在实现表格隔行变色，且鼠标移动在表格的某一行上时，该行能高亮显示。整体代码如下：

<!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="Content-Type" content="text/html; charset=utf-8" />

<title>表格隔行变色且鼠标滑过高亮显示</title>

<style>

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;}

</style>

<script type="text/javascript" src="../../jquery-1.7.1.js"></script>

</head>

<body>

<script>

/*

* tableUI 0.1

* Copyright (c) 2014 tnnyang http://tnnyang.cnblogs.com/

* 使用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函数。

</script>

<table cellpadding="0" cellspacing="0">

  <tr><td>1</td><td>2</td><td>3</td></tr>

  <tr><td>1</td><td>2</td><td>3</td></tr>

  <tr><td>1</td><td>2</td><td>3</td></tr>

  <tr><td>1</td><td>2</td><td>3</td></tr>

  <tr><td>1</td><td>2</td><td>3</td></tr>

</table>

<script>

$(function(){

    $("table").tableUI();

    })

</script>

</body>

</html>

jquery插件之表格隔行变色并鼠标滑过高亮显示的更多相关文章

  1. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  2. jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:  

  3. jquery简单实现表格隔行变色

    小知识点:odd的过滤选择器大的使用 html代码: <table> <tr> <td>用户名</td> <td>年龄</td> ...

  4. Jquery 组 tbale表格隔行变色

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  5. 我的第一个jQuery插件--表格隔行变色

    虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...

  6. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

  7. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  8. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  9. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

随机推荐

  1. memcached基于socket访问memcache缓存服务器

    memcached基于socket访问memcache缓存服务器 操作memcache常用三种方法: .memcache基于php_memcache.dll扩展(php扩展) .memcached基于 ...

  2. [JavaCore] 取得类的字节码、取得类的装载器

    三种方式取得类的字节码: 1. 类名.class BranchInfoService.class 2. 对象名.getClass() branchInfoService.getClass() 3. C ...

  3. 25条提高Visual Studio编码和调试效率的技巧

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:工欲善其事必先利其器.就算手中已经有了利器,如果能掌握一些使用工具的技巧,让利器更加顺 ...

  4. C++的模板特化 和 STL中iterator_traits模板的偏特化

    C++中有类模板和函数模板,它们的定义如下所示: 类模板: template<class T1,class T2> class C { //... }; 函数模板: template< ...

  5. 看懂UML类图与时序图

    看懂UML类图和时序图 这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系: 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同时,我们应该能将类图 ...

  6. css之overflow：细探之下有意想不到的结果

    overflow 是一个非常常用的 CSS 属性,一般来说会认为很简单,其实细究之后就会发现他还有很多小特性或者说意想不到的结果: 下面就介绍下(在浏览器环境下)关于 overflow 的小总结. 哪 ...

  7. DZY Loves Sequences

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  8. 静态成员函数（面向对象的static关键字）

    静态成员函数 与静态数据成员一样,我们也可以创建一个静态成员函数,它为类的全部服务而不是某一个类的具体对象服务.静态成员函数与静态数据成员一样,都是类的内部实现,属于类定义的一部分.普通的成员函数一般 ...

  9. C#获取IP地址

    public string GetUserIP()   {        string _userIP;       if(Request.ServerVariables["HTTP_VIA ...

  10. 项目新的需求，网页的自适应交付/响应式交付 Responsive/Adaptive Delivery

    网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个102 ...