该插件乃本博客作者所写,目的在于提升作者的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. Mesa 3D

    Mesa 3D是一个在MIT许可证下开放源代码的三维计算机图形库,以开源形式实现了OpenGL的应用程序接口. OpenGL的高效实现一般依赖于显示设备厂商提供的硬件,而Mesa 3D是一个纯基于软件 ...

  2. Android使用JNI实现Java与C之间传递数据(转)

    介绍Java如何将数据传递给C和C回调Java的方法.  java传递数据给C,在C代码中进行处理数据,处理完数据后返回给java.C的回调是Java传递数据给C,C需要用到Java中的某个方法,就需 ...

  3. codeforces724-A. Checking the Calendar 日期题

    首先有这样一个显然的事实,那就是每个月的第一天可以是星期x,x可以取遍1~7 因为日期一直在往后退,总有一年能轮到分割线那天,因为本来其实压根就没有月份的划分,月份划分是人为的 而且我们也不知道开始的 ...

  4. 【MyEcplise hibernate tools】hibernate tools的使用以及错误

    1.点击Myecplise右上角 2.点击进入后,在这个区域右键 New 一个新的connection 3.以mySql连接为例子,在这里展示一下,下面这几项必须都要按照要求完全一致,除了架包所在的本 ...

  5. 第一个vs2013控制台程序

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. loadrunner中变量和参数之间的转化实例

     1.变量转换成参数值的两种方法: 方法一: char *test="Agoly"; lr_save_string(test,"testPa");   lr_e ...

  7. lr_save_string 和 sprintf 的使用

    lr_save_string 和 sprintf 的使用 一.lr_save_string 使用介绍1.该函数主要是将程序中的常量或变量保存为lr中的参数.格式: //将常量保存为参数 lr_save ...

  8. 你必须知道的.NET之特性和属性(转)

    1. 引言 attribute是.NET框架引入的有一技术亮点,因此我们有必要花点时间走进一个发现attribute登堂入室的入口.因为.NET Framework中使用了大量的定制特性来完成代码约定 ...

  9. 廖雪峰js教程笔记8 date对象介绍和处理

    在JavaScript中,Date对象用来表示日期和时间. 要获取系统当前时间,用: var now = new Date(); now; // Wed Jun 24 2015 19:49:22 GM ...

  10. canvas绘制

    window.onload = function(){ var can1 = document.getElementById("can1"); var ctx = can1.get ...