该插件乃本博客作者所写，目的在于提升作者的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. HDU 5791 Two DP

    Two   Problem Description   Alice gets two sequences A and B. A easy problem comes. How many pair of ...

  2. Xcode 缓存 帮助文档 隐藏文件夹显示方法

    删除Xcode的缓存路径是:/Users/用户名/Library/Developer/Xcode/DerivedData(默认情况下, 这是一个隐藏文件夹) 显示隐藏文件夹 指令如下:显示隐藏文件: ...

  3. Linux下autoconf和automake使用

    转载:www.cnblogs.com/itech/archive/2010/11/28/1890220.html

  4. Quick-Cocos2dx 快速了解

    set_dev_envirment // */ // ]]> Cocos2dx快速了解 1. Quick-Cocos2dx 开发环境搭建 1.1. 官网: 1.2. Github: 1.3. s ...

  5. JQuery经典小例子——可编辑的表格

    可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...

  6. JMeter正则表达式-学习（3）

    同时关联多个值的方法: { : ", : "results": : [ : : { : : : "total_earnings":"&quo ...

  7. WebSocket协议开发

    一直以来,网络在很大程度上都是围绕着HTTP的请求/响应模式而构建的.客户端加载一个网页,然后直到用户点击下一页之前,什么都不会发生.在2005年左右,Ajax开始让网络变得更加动态了.但所有的HTT ...

  8. JDK AIO编程

    NIO2.0引入了新的异步通道的概念,并提供了异步文件通道和异步套接字通道的实现.异步通道提供两种方式获取获取操作结果. 通过java.util.concurrent.Future类来表示异步操作的结 ...

  9. hdu1150 匈牙利

    http://acm.split.hdu.edu.cn/showproblem.php?pid=1150 题目大意:有两台机器A和B以及N个需要运行的任务.每台机器有M种不同的模式,而每个任务都恰好在 ...

  10. HDU 4858 项目管理 分块

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4858 题解: 下面说一个插入查询时间复杂度为sqrt(m)的算法: 对每个点定义两个值:val,su ...