上一篇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. Java 泛型 二

    一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 public class GenericTest { 2 3 public static void main(Stri ...

  2. USACO Section2.3 Zero Sum 解题报告 【icedream61】

    zerosum解题报告----------------------------------------------------------------------------------------- ...

  3. SpringMVC 集成 Freemarker 模板引擎

    本文通过 maven 项目中集成 1.引入 SpringMVC 与 Freemarker 需要的依赖 <!-- SpringMVC --> <dependency> <g ...

  4. 抓包工具 - Fiddler - （三）

    <转载自 miantest> 我们知道Fiddler是位于客户端和服务器之间的代理,它能够记录客户端和服务器之间的所有 HTTP请求,可以针对特定的HTTP请求,分析请求数据.设置断点.调 ...

  5. paramiko类Fabric主机管理

    环境:Linux python3.5 要求:类 Fabric 主机管理程序开发:1. 运行程序列出主机组或者主机列表2. 选择指定主机或主机组3. 选择让主机或者主机组执行命令或者向其传输文件(上传/ ...

  6. [g2o]C++图优化库

    g2o以图模型表达上述最小二乘问题:比较适合解决SLAM问题 http://openslam.org http://wiki.ros.org/g2o

  7. JavaScript里面的基本函数

    1.主要有三类基本函数 <script type="text/javascript"> // 普通函数 function func1(arg){ return true ...

  8. oom 和 jvm crash的问题

    很多次生产环境jvm进程无故消失的时候都留下了hs_err[pid].log文件  然后通过mat分析大多数情况是oom导致的  所以以前一直认为OOM一定会导致jvm crash  也就是说java ...

  9. 在LinkedIn的 Kafka 生态系统

    在LinkedIn的 Kafka 生态系统 Apache Kafka是一个高度可扩展的消息传递系统,作为LinkedIn的中央数据管道起着至关重要的作用. Kafka 是在2010年在LinkedIn ...

  10. POJ 2983-Is the Information Reliable

    Description The galaxy war between the Empire Draco and the Commonwealth of Zibu broke out 3 years a ...