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

    Matlab is a very useful programming environment, but it also has many inefficiencies. You might thin ...

  2. dwz的form表单中url的变量替换

    form表单中action的地址格式 “__URL__/edit/{xxx}”,大括号内的 “xxx” 就是变量名,主要功能是结合table组件一起使用. 下图中的删除.编辑.修改密码都是用了url变 ...

  3. Tomcat环境配置部署测试环境及架构

    Tomcat环境配置已经在前面介绍过了,这边就为童鞋们介绍下对于Tomcat的架构是怎么样的! Tomcat的架构包含(bin.conf.lib.logs.temp.wenapps.work)等文件夹 ...

  4. mob免费短信验证码安卓SDK调用方法

    很不错的一款免费验证码平台,支持IOS.安卓,比那些收费的稳定.开发容易.分享给大家,希望大家不要滥用 官网: http://mob.com/ 官方有开发文档,但是有几点要注意的官方没有提到,导致初始 ...

  5. POJ 2155 Matrix（二维树状数组+区间更新单点求和）

    题意:给你一个n*n的全0矩阵,每次有两个操作: C x1 y1 x2 y2:将(x1,y1)到(x2,y2)的矩阵全部值求反 Q x y:求出(x,y)位置的值 树状数组标准是求单点更新区间求和,但 ...

  6. js倒计时（可定义截止日期）

    <div id="times_wrap" class="time_num"> 距离结束时间: <div class="time_w& ...

  7. SpringMyBatis解析4-MapperScannerConfigurer

    如果有成百上千个dao接口呢,那我们岂不是要配置添加成百上千个bean,当然不是这样,spring还为MyBatis添加了拓展的功能,可以通过扫描包目录的方式,添加dao,让我看看具体使用和实现. & ...

  8. Angular JS 学习之服务(Service)

    1.AngularJS中,可以创建自己的服务,或使用内建服务: 2.在AngularJS中,服务是一个函数或对象,可在你的AngularJS应用中使用: AngularJS内建了30多个服务:有个$l ...

  9. DSP using MATLAB 示例 Example3.11

    用到的性质 上代码: n = -5:10; x = rand(1,length(n)); k = -100:100; w = (pi/100)*k; % freqency between -pi an ...

  10. 20145223《Java程序程序设计》实验报告5

    20145223杨梦云<Java网络编程> 一.实验内容 ·1.运行下载的TCP代码,结对进行,一人服务器,一人客户端: ·2.利用加解密代码包,编译运行代码,一人加密,一人解密: ·3. ...