该插件乃本博客作者所写，目的在于提升作者的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. C++模板【转】

    1. 模板的概念. 我们已经学过重载(Overloading),对重载函数而言,C++的检查机制能通过函数参数的不同及所属类的不同.正确的调用重载函数.例如,为求两个数的最大值,我们定义MAX()函数 ...

  2. Ubuntu14 搭载vim环境查看源码

    首先是下载完整的vim74,然后编译安装.遗憾的是当编译时,没有开启图形界面. 在安装新版本的Vim之前,你需要卸载原来安装的老版本Vim,依次在终端下执行下列命令: sudo apt-get rem ...

  3. 【java基础】重载与重写

    前言 : 很早的时候,我就知道这两个东西,但是,也仅仅是停留在知道的程度而已,对于什么是重写,什么事重载,还是感到十分的迷惑,迷茫.正好,在软考复习时又经历这两个东西,细心一点,探究了一下,有点收获, ...

  4. 深入剖析Java中的装箱和拆箱

    深入剖析Java中的装箱和拆箱 自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就来一些看一下装箱和拆箱中的若干问题.本文先讲述装箱和拆箱最基本的东西,再来看一下面试笔试中经常遇到的与装箱 ...

  5. 从客户端(CourseIssueContent="<P>财务审计师岗位认证招生简章<BR>...")中检测到有潜在危险的 Request.Form 值。

    说明: 请求验证过程检测到有潜在危险的客户端输入值,对请求的处理已经中止.该值可能指示危及应用程序安全的尝试,如跨站点的脚本攻击.通过在 Page 指令或 配置节中设置 validateRequest ...

  6. hdu1712 分组背包

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1712 题意:有n门课程,和m天时间,完成mp[i][j]得到的价值为第i行j列的数字,求最 ...

  7. Swift3.0语言教程分割字符串与截取字符串

    Swift3.0语言教程分割字符串与截取字符串 Swift3.0语言教程分割字符串 如果想要快速的创建一个数组,我们可以将字符串进行分割,分割后的内容将会生成一个数组.在NSString中有两个分割字 ...

  8. constructor

    function Person(name){ this.name = name; } Person.prototype = { constructor : Person, sayName : func ...

  9. EntityFramework Code First 手写代码实现生成数据库

    第一步:写实体类 第二步:写一个实体操作类,此类必须继承Dbcontext,此处的属性,将会在初始化时(第一次作,增,删,改的时候),生成相应的表. 第三步:运行程序,会自动建表 注意: 若实体类发生 ...

  10. Spring MVC Test -Controller

    http://www.petrikainulainen.net/programming/spring-framework/unit-testing-of-spring-mvc-controllers- ...