虽然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. MySQL超级简明基本操作攻略,给自己看(一)

    系统:Ubuntu 14.04 LTS 安装: apt-get install mysql //安装数据库 apt-get install mysql-workbench //安装图形界面 使用: 启 ...

  2. [Android] Android开发优化之——对界面UI的优化（2）

    在Android应用开发过程中,屏幕上控件的布局代码和程序的逻辑代码通常是分开的.界面的布局代码是放在一个独立的xml文件中的,这个文件里面是树型组织的,控制着页面的布局.通常,在这个页面中会用到很多 ...

  3. Testbench代码设计技巧

    Testbench代码设计技巧 " There are many ways " to code a test case, it all depens on the creativi ...

  4. bzoj5157: [Tjoi2014]上升子序列(树状数组LIS)

    5157: [Tjoi2014]上升子序列 题目:传送门 题解: 学一下nlogn的树状数组求最长上生子序列就ok(%爆大佬) 离散化之后,用一个数组记录一下,直接树状数组做 吐槽:妈耶...一开始不 ...

  5. Windows phone解决GB2312编码问题

    环境win8+vse for Windows phone 在网站http://encoding4silverlight.codeplex.com/上点击下载 之后有三个文件big5.bin,DBCSE ...

  6. Ubuntu系统下安装Eclipse

    第一步:查看操作系统位数. 打开终端,输入file /sbin/init 可以看到笔者Ubuntu系统为32位,读者可以使用该命令获取自己机器上的操作系统位数. 这一步是最至关重要的一步,笔者机器处理 ...

  7. POJ 1852 Ants O(n)

    题目: 思路:蚂蚁相碰和不相碰的情况是一样的,相当于交换位置继续走. 代码: #include <iostream> #include <cstdio> #include &l ...

  8. Android 开发环境安装配置手册

    本文指导,如何一步步搭建Android开发平台. 1  下载软件 n JDK 1.5+   到  http://java.sun.com/javase/downloads/index.jsp 下载 n ...

  9. hiho 1604 - 股票价格，思维题

    题目链接 题目大意 小Hi最近在关注股票,为了计算股票可能的盈利,他获取了一只股票最近N天的价格A1~AN. 在小Hi的策略中,每天可以在下列三种操作中选取一种: 1.什么也不做: 2.按照当天的价格 ...

  10. [AHOI2013]作业 莫队 树状数组

    #include<cmath> #include<cstdio> #include<algorithm> #include<string> #inclu ...