该插件乃本博客作者所写，目的在于提升作者的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. 导出word使用模版

    在我们做我们的小组项目的时候,刚开始的时候我们用到的是Mvc+EF,用上了我们的ITOO框架.在最开始的计划,我们要用到瑞郎报表.可是呢,由于工期原因以及技术暂时没有实现,我们不得不想一个比较折中的方 ...

  2. CF735C 数论\平衡树叶子节点的最大深度\贪心\斐波那契\条件归一化

    http://codeforces.com/problemset/problem/735/C 题意..采用淘汰赛制..只要打输就退出比赛..而且只有两个选手打过的场数 相差不超过1才能比赛..最后问你 ...

  3. LoadRunner参数化之数据取值和更新方式

    其实看LR已经很久了,每次看到参数化的取值更新时,都没有看透,了解个大概就为止了,也确实挺搞脑子的. 现在理解下来 分成2部分 取值方式  Select next row 如何从数据列表中取值 Seq ...

  4. JQuery学习之语法

    1.JQuery语法就是通过选取HTML元素,并对选取的元素执行某些操作: 基础语法:$(selector).action() (1)美元符号定义jQuery (2)选择符(selector)查询和查 ...

  5. Codeforces Edu3 E. Minimum spanning tree for each edge

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  6. Oracle 创建表空间一边串过程

    1.打开SQL Plus,根据提示输入用户名密码登录. 注意:如果是系统用户的话,只能用sysdba登录.例如:sys as sysdba,输入User的密码进行登录. 2.登录成功后,首先创建表空间 ...

  7. python闭包与装饰器

    转自小马哥: 闭包和装饰器充分体现了Python语法糖的优雅感觉. 在本文中,我们的实验要完成两个工作,一个是加法,一个是累计调用加法的次数,最普通的Python程序可以这么写: def valida ...

  8. 我的c++学习(4) C++输入输出格式的控制

    默认进制:默认状态下,数据按十进制输入输出.如果要求按八进制或十六进制输入输出,在cin或cout中必须指明相应的数据形式,oct为八进制,hex为十六进制,dec为十进制. #include &qu ...

  9. BZOJ4171 : Rhl的游戏

    把第一行每个位置设成未知量,对于之后每一行,都可以用第一行的未知量线性表示. 那么只需要加上最后一行的$m$个方程,对于不能按的那$k$个位置也列出对应的方程. 用高斯消元判断是否有解即可,时间复杂度 ...

  10. HDU1518 Square(DFS,剪枝是关键呀)

    Square Time Limit : 10000/5000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submi ...