上一篇jquery实现checkbox的全选，得到了一些朋友的建议，其中插件的定义我的确不太清楚，也闹了个笑话，有些朋友建议我去看《锋利的Jquery》，说实话正在看了。由于正在学习中，我就想把项目中经常要用的jquery效果自己写成通用方法，可以在大家的帮助下完善这些方法，也可以让不会的了解到一种做法，最后

形成自己的Jquery 方法库，方便以后的使用，这些例子都是我自己写的，没有参考，所以有很多地方需要改进。

1：为什么要写这个方法

在项目中，一些table都要设置样式，为了样式的美观，表头是一个样式，奇数行一个样式，偶数行一个样式。当鼠标经过的时候颜色变化，鼠标离开时颜色恢复,这就有了这样方法。

2：实现过程

js文件xs_table_css.js

//****************************************************************************************

//作者：轻狂书生

//博客地址：http://www.cnblogs.com/xiaoshuai1992

//create: 2014/1/17

//功能：实现table颜色变化

//使用方法：引用jquery,设置table的样式为变量xs_table_css的值

//*****************************************************************************************

$(document).ready(function () {

    var xs_table_css = "xs_table"; //获取table的css

    var xs_table_th_css = "xs_table_th"; //table 的th样式

    var xs_table_even_css = "xs_table_even"; //table的偶数行css

    var xs_table_odd_css = "xs_table_odd"; //table的奇数行css

    var xs_table_select_css = "xs_table_select"; //table选择行的样式

    var xs_table = "table." + xs_table_css;

    $(xs_table).each(function () {

        $(this).children().children().has("th").addClass(xs_table_th_css); //表头

        var tr_even = $(this).children().children(":even").has("td"); //数据偶数行

        var tr_odd = $(this).children().children(":odd").has("td"); //数据奇数行

        tr_even.addClass(xs_table_even_css);

        tr_odd.addClass(xs_table_odd_css);

        tr_even.mouseover(function () {

            $(this).removeClass(xs_table_even_css);

            $(this).addClass(xs_table_select_css);

        });

        tr_even.mouseout(function () {

            $(this).removeClass(xs_table_select_css);

            $(this).addClass(xs_table_even_css);

        });

        tr_odd.mouseover(function () {

            $(this).removeClass(xs_table_odd_css);

            $(this).addClass(xs_table_select_css);

        });

        tr_odd.mouseout(function () {

            $(this).removeClass(xs_table_select_css);

            $(this).addClass(xs_table_odd_css);

        });

    });

});

样式文件xs_table.css

.xs_table

{

}

.xs_table_th

{

    height: 50px;

    background-color: #C0C0C0;

}

.xs_table_even

{

    height: 50px;

    background-color: #F0F0F0;

}

.xs_table_odd

{

    height: 50px;

    background-color: #FFFFFF;

}

.xs_table_select

{

    height: 50px;

    background-color: #D9D9D9;

}

页面文件xs_table_css.htm

<!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>

    <title></title>

    <link href="xs_table.css" rel="stylesheet" type="text/css" />

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js" type="text/javascript">

    </script>

    <script src="xs_table_css.js" type="text/javascript"></script>

</head>

<body>

<table class="xs_table" width="800px">

<tbody >

<tr><th>headone</th><th>headTwo</th></tr>

<tr><td>第一行</td><td></td></tr>

<tr><td>第二行</td><td></td></tr>

<tr><td>第三行</td><td></td></tr>

<tr><td>第四行</td><td></td></tr>

</tbody>

</table>

<br />

<br />

<table class="xs_table" width="800px">

<tr><th>headone</th><th>headTwo</th></tr>

<tr><td>第一行</td><td></td></tr>

<tr><td>第二行</td><td></td></tr>

<tr><td>第三行</td><td></td></tr>

<tr><td>第四行</td><td></td></tr>

</table>

</body>

</html>

3：方法说明

（1）mouseover和mouseout要先移除上次的css，不然会出现样式叠加

（2）找tr时注意tbody,虽然页面上没有tbody标签，但是默认会有这个子元素

（3）奇偶行要去除th，只找td的

4：下载地址：实现table样式设定.zip

谢谢大家的指正，一起学习，一起进步了

Jquery学习之路(二) 实现table样式的设定的更多相关文章

  1. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. jQuery插件之路(二)——轮播

    还记得以前刚接触前端的时候,浏览各大网站,很多都少不了的有个轮播的效果,那个时候自己是一个彻彻底底的小白,想着这些图片滚动起来还真是有意思,是什么让这些图片在一个方向上连续的滚动呢.后来慢慢的接触多了 ...

  3. Redis——学习之路二（初识redis服务器命令）

    上一章我们已经知道了如果启动redis服务器,现在我们来学习一下,以及如何用客户端连接服务器.接下来我们来学习一下查看操作服务器的命令. 服务器命令: 1.info——当前redis服务器信息   s ...

  4. jQuery 源码解析(二十六) 样式操作模块 样式详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj)            ;参数 ...

  5. jQuery 源码解析(二十九) 样式操作模块 尺寸详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下尺寸这一块 jQuery通过样式操作模块里的尺寸相关的API可以很方便的获取一个元素的宽度.高度,而且可以很方便的区分padding.b ...

  6. JS与Jquery学习笔记（二）

    一. JS 的面向对象 JS没有类,其类就用function来代替如下所示: function Cat(name, color){ this.name=name; this.color=color; ...

  7. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  8. jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  9. jQuery学习之路（6）- 简单的表格应用

    ▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...

随机推荐

  1. 6.bootstrap 将文本内容关联一个动作（手机端导航适配）&在超小尺寸下显示，屏幕变大后消失

    1.情景:这是出现在手机端导航适配的,点击文本MENU可以出现下拉的list 解决方法: 1.首先要想到,MENU只有两个状态,因此可以用checkbox实现 2.将MENU放在label标签里面,l ...

  2. oracle集群部署相关文章

    1. Oracle数据库HA架构方案介绍:http://blog.sina.com.cn/s/blog_7273b6cc0100p0sr.html 2.Oracle 集群概念和原理

  3. 从事IT业一个8年老兵转行前的自我总结1——初爻

    现在,本人已离开这个呆了8年的软件行业了.回想自己从半路出家,从实施开始做起,最终在一家外企做项目经理PM结束了自己的软件职业生涯.从一张白纸的自学开始,做过项目实施,客户培训,拿过需求,开发,架构设 ...

  4. 《Cracking the Coding Interview》——第2章：链表——题目6

    2014-03-18 02:41 题目:给定一个带有环的单链表,找出环的入口节点. 解法1:用hash来检测重复节点肯定是容易想而且效率也高的好办法. 代码: // 2.6 You have a ci ...

  5. 程序员必需知道的Windows Shell命令

    Windows系统本来就很人性化的操作系统,操作很方便,但是对于开发人员来说,有些时候改变一些电脑配置或者执行某些任务来说,使用GUI操作反而事倍功半,因此建议使用Shell命令来提高一下工作效率. ...

  6. Python之进程、线程、协程

    进程和线程的目的 进程和线程目的是为了:提高执行效率 现代操作系统比如Mac OS X,UNIX,Linux,Windows等,都是支持“多任务”的操作系统. 什么叫“多任务“呢?简单地说,就是操作系 ...

  7. 第一章 C++编程基础

    第一章 C++编程基础 1.1 如何撰写C++程序 赋值 assignment复合赋值 (compound assignment) += 函数(function)是一块独立的程序代码序列(code s ...

  8. Opencv2.4.13.6安装包

    这个资源是Opencv2.4.13.6安装包,包括Windows软件包,Android软件包,IOS软件包,还有opencv的源代码:需要的下载吧. 点击下载

  9. hdu 2579 Dating with girls(2) (bfs)

    Dating with girls(2) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  10. Spring Boot RabbitMQ 延迟消息实现完整版

    概述 曾经去网易面试的时候,面试官问了我一个问题,说 下完订单后,如果用户未支付,需要取消订单,可以怎么做 我当时的回答是,用定时任务扫描DB表即可.面试官不是很满意,提出: 用定时任务无法做到准实时 ...