虽然jquery流行已经很多年了，一直都感觉很难，也没有花时间去学习它，只是偶尔哪天心血来潮了去看一点点，时隔多日又会忘得一干二净。最近用到表格奇偶行不同色，不得不去再看jquery，虽然感觉还是难，但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了，不用自己再写一大堆javascript函数去实现了，简单几句轻松搞定。
　　先定义好表格的奇偶行样式，如下代码：

body {

    font-size:12px;

}

th {

    color: #FFFFFF;

    background: #A172AC;

}

table,table td,table th {

    padding: 0.5em;

    margin:;

    border:;

    border-spacing:;

}

/* odd items 1,3,5,7,... */

table tbody tr.odd,

.odd {

    background: #FBD106;

}

/* even items 2,4,6,8,... */

table tbody tr.even,

.even {

    background: #E6453B;

}

/* hovered items */

.odd:hover,

.even:hover,

.hover {

    background: #4BB747;

    color: #FFFFFF;

}

再就是页面代码了：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>用jquery实现table奇偶行不同色</title>

    <link href="style/mysql.css" rel="stylesheet" />

    <script src="javascript/jquery-1.7.2.min.js"></script>

    <script language="javascript" type="text/javascript">

        $(document).ready(function () {

            //排除th标签，th可能是有自己特有的样式，所以定义th样式。

            //$("tr:not(:has(th)):odd").addClass("odd");

            //$("tr:not(:has(th)):even").addClass("even");

            $("tr:odd").addClass("odd");

            $("tr:even").addClass("even");

            //如果CSS中不定义".odd:hover"和".even:hover"就需要toggleClass()。

            /*

            $("tr").mouseover(function () {

                $(this).toggleClass(".hover");

            });

            $("tr").mouseout(function () {

                $(this).toggleClass(".hover");

            });

            */

        });

    </script>

</head>

<body>

    <div id="outline">

        <table>

            <tr id="tth">

                <th>data</th>

                <th>data</th>

                <th>data</th>

                <th>data</th>

            </tr>

            <tr>

                <td>data</td>

                <td>data</td>

                <td>data</td>

                <td>data</td>

            </tr>

            <tr>

                <td>data</td>

                <td>data</td>

                <td>data</td>

                <td>data</td>

            </tr>

            <tr>

                <td>data</td>

                <td>data</td>

                <td>data</td>

                <td>data</td>

            </tr>

            <tr>

                <td>data</td>

                <td>data</td>

                <td>data</td>

                <td>data</td>

            </tr>

        </table>

    </div>

</body>

</html>

如果不需要鼠标事件，只需奇偶行不同色直接可以用CSS搞定。

            table tr:nth-child(even) td,

            table tr:nth-child(even) th {

                background-color: #FBD106;

            }

            table tr:nth-child(odd) td,

            table tr:nth-child(odd) th {

                background-color: #E6453B;

            }

用jquery控制表格奇偶行及活动行颜色的更多相关文章

  1. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

  2. jquery 设置表格奇偶数的颜色和行被选中的颜色样式jquery 设置表格奇偶数的颜色和行被选中的颜色样式

    query 代码 $(funtion(){ //设置偶数行和奇数行 $("tbody>tr:odd").addClass("ou");   //为奇数行设 ...

  3. jQuery控制表格行移动，序号不变

    @model Gd.NetSign.Controllers.DTO.SysPamaterDTO @{ ViewBag.Title = "SysPamatList"; //Layou ...

  4. jquery实现表格复选框---多行选择问题(php变量)

    1.html多选框标签行 表头的多选框,用于全选,取消全选 <th><input id='allSelected' type="checkbox">< ...

  5. jQuery 控制表单和表格

    这里总结了jQuery中对表格和表单的一些常用操作, 通过这里的实例和操作肯定对jQuery的掌握有一个新得提高, 希望大家耐心看完, 多实践. <!DOCTYPE html PUBLIC &q ...

  6. AppBoxPro - 细粒度通用权限管理框架（可控制表格行内按钮）源码提供下载

    特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以运行起来(默认使用VS自带的LocalDB数据库). FineUIPro是 ...

  7. 纯CSS3代码实现表格奇偶行异色，鼠标悬浮变色

    1.首先会用到<tr></tr>元素两个伪类,nth-child()和hover. 然后需要注意的是伪类都是通过冒号引用的,不是点号,即tr:hover{} 其次,CSS代码中 ...

  8. jQuery实现表格行的动态增加与删除(改进版)

    之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...

  9. JQuery实现表格自动增加行，对新行添加事件

    实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...

随机推荐

  1. zzulioj--1600--直线与圆(简单数学几何)

     1600: 直线与圆 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 360  Solved: 73 SubmitStatusWeb Board ...

  2. VBA 第一天

    公司实习第一天,excel搞不定啊,学点VBA留着用: 录制宏: 点击录制宏按钮以后,在这段期间你做的每一个操作都会被记录下来,直到你点击停止录制按钮才能够停下,停下来后在此期间每一个操作都会以宏代码 ...

  3. Laravel-redis-订阅发布

    Laravel-redis-订阅发布 标签(空格分隔): php Redis订阅发布 理解订阅发布: publish:将信息 message 发送到指定的频道 channel publish test ...

  4. js小知识 双叹号(!!)

    !!:一般用来将后面的表达式强制转换为布尔值(boolean):true或者false; avascript约定规则为:  false.undefinded.null.0.”” 为 false  tr ...

  5. RGB与16进制色互转

      点击进入新版 <前端在线工具站> CSS, JavaScript 压缩YUI compressor, JSPacker...HTML特殊符号对照表PNG,GIF,JPG... Base ...

  6. ikbc 时光机 F87 Ctrl 失灵 解决办法

    多按几次Fn+PrtSc,直至按键无错位.

  7. 【原创】Unable to read TLD "META-INF/c.tld" from JAR file 解决方法

    type Exception report message description The server encountered an internal error () that prevented ...

  8. 「JavaSE 重新出发」01. Java介绍

    「白皮书」关键术语 简单性(C++--) 面向对象 分布式 健壮性 安全性 体系结构中立 可移植性 解释型 高性能 多线程 动态性 Java 发展历程 SUN公司--Stanford Universi ...

  9. 安卓怎么不如ios运行流畅

    一.优先级别不同:iOS最先响应屏幕当我们使用iOS或者是Android手机时,第一步就是滑屏解锁找到相应程序点击进入.而这个时候往往是所有操控开始的第一步骤,iOS系统产品就表现出来了流畅的一面,但 ...

  10. php nusoap类的使用、用法、出错 及说明

    NuSOAP 是 PHP 环境下的 WEB 服务编程工具,用于创建或调用 WEB 服务它是一个开源软件,当前版本是 0.7.2 ,支 持 SOAP1.1 WSDL1.1 ,可以与其他支持 SOAP1. ...