虽然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. Java5新特性之枚举

    1.  概念 首先,枚举并非一种新技术,而是一种基础数据类型.它隶属于两种基础类型中的值类型,例如以下: 2.  为什么要有枚举 枚举在真正的开发中是非经常常使用的,它的作用非常easy也非常纯粹:它 ...

  2. Appium AndroidKeyCode

    driver.sendKeyEvent(AndroidKeyCode.BACK); driver.sendKeyEvent(AndroidKeyCode.BACKSPACE); driver.send ...

  3. 《从零開始学Swift》学习笔记（Day5）——我所知道的标识符和keyword

     Swift 2.0学习笔记(Day5)--我所知道的标识符和keyword   原创文章,欢迎转载.转载请注明:关东升的博客 好多计算机语言都有标识符和keyword,一直没有好好的总结,就是这 ...

  4. (OpenGL ES 2.0 Shading Language) attribute 、uniform 和 varying

    一:attribute .uniform 和 varying 都是glsl的变量的内存指示器(storage qualifiers),指明变量的内存特性 二:attribute attribute 是 ...

  5. Zorka监控平台的Online reconfiguration基本效果展示

    在上一篇日志中,我简介了Zorka的Online reconfiguration的用法,可是没怎么介绍如何看到在线更改的效果,这里简单说说. 还是以之前的tomcat为例,我们在文件夹zorka\sc ...

  6. centos6.0 配置SVN

    基本步骤: 1.安装必需的subversion 2.创建版本库 3.配置用户和权限 4.钩子和svn常用命令说明 一.安装subversion 在这里我们使用yum来安装subversion,使用以下 ...

  7. SVN Commit报错 svn: E155037: Previous operation has not finished; run 'cleanup' if it was interrupted

    svn commit 文件出错 svn: E155037: Commit failed (details follow): svn: E155037: Previous operation has n ...

  8. MySQL学习(二)——SQL语句创建删除修改以及中文乱码问题

    一.对数据库的操作 1.创建一个库 create database 库名; 创建带有编码的:create database 库名 character set 编码; 查看编码:show create ...

  9. 用js将CheckBox的值存入数据库和将数据库字符串的值转为数组选中CheckBox

    Index @{ ViewBag.Title = "测试"; } <script src="~/Scripts/jquery-1.10.2.js"> ...

  10. 【参考】查找Oracle最高的几个等待事件以及锁的信息

    1.通过操作系统的命令找到系统资源的bottleneck,如:CPU, Memory, I/O, Network  同时主要关注IOWait, PI/PO, Memory的使用情况 2.通过查询v$s ...