虽然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. 安卓APP载入HTML5页面解决方式总结

    因为H5页面在移动端的兼容性及扩展性方面体现出来的优势,又兼得APP中植入H5页面相应用的灵活性有大大的提升(如活动.游戏的更新等).APP开发不可避免的须要载入一些H5页面.但安卓client对网页 ...

  2. JavaWeb错误处理集锦

    一:起因 (1)自己接下来想走算法的路子,打算把十大算法和数学模型学习一下,算是给自己之前 JavaWeb 的一个总结: (2)记得Java算是第一个比較上手的语言了,更是用JavaWeb走过了非常长 ...

  3. hdu_2191多重背包

    用二维数组解的,因为忘了memset害我wa了好几发... #include<iostream> #include<cstdio> #include<cstring> ...

  4. doT中嵌套for循环的使用

    1.数据结构 var goods = [ { "id": "1", "name": "衣服", "goods& ...

  5. ThinkPHP新建控制器

    ThinkPHP新建控制器 一.效果图 二.步骤 1.新建控制器文件 2.编写控制器文件 3.访问控制器 三.注意事项

  6. zzuoj--10399--Turing equation（模拟）

    Turing equation Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 152  Solved: 85 [Submit][Status][Web ...

  7. [JZOJ 5895] [NOIP2018模拟10.5] 旅游 解题报告 （欧拉回路+最小生成树）

    题目链接: https://jzoj.net/senior/#main/show/5895 题目: 题解: 有一个好像比较显然的性质,就是每条边最多经过两次 那么我们考虑哪些边需要经过两次.我们把需要 ...

  8. 2.QT字符串及一些基本操作

    mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> namespace Ui { c ...

  9. ubuntu上配tensorflow

    前一阵绕了大弯路,基本弄好了UEFI双系统后,面对的就是CUDA咋装在Linux. 好在教程好多,有些朋友建议先装CUDA再装显卡驱动.弄好之后记录一下详细过程吧. *** 这两天看了一些教程,还是感 ...

  10. AbstractQueuedSynchronizer中CAS的疑惑

    这段代码是AQS框架中将当前节点入队的操作. Node pred = tail; if (pred != null) { node.prev = pred; if (compareAndSetTail ...