虽然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. 使用C++实现学生管理系统

    我在前面的博客中分别使用C语言的动态数组和链表实现了学生成绩管理系统.近期正好在学习C++,于是我便使用C++实现了学生成绩管理系统.算法和前面的C语言的动态数组实现的学生成绩管理系统几乎相同,仅仅是 ...

  2. JUnit4.8.2源码分析-4 RunNotifier与RunListener

    JUnit4运行过程中,org.junit.runner.notification. RunListener和RunNotifier运用了观察者模式. 1.观察者 观察者Observer/Listen ...

  3. python写个简单的文件上传是有多难，要么那么复杂，要么各种，，，老子来写个简单的

    def upload(url,params): ''' 上传文件到server,不适合大文件 @params url 你懂的 @params {"action":"xxx ...

  4. AspNet WebApi 中应用fo-dicom抛出异常：No codec registered for tranfer syntax:

    背景: 在做一个Dicom Web Service, 当中WADO-RS中须要解析TransferSyntax, 然后就用到了fo-dicom中的DicomFile.ChangeTransferSyn ...

  5. m_Orchestrate learning system---十二、为什么thinkphp验证场景里面的多个属性之间是逗号

    m_Orchestrate learning system---十二.为什么thinkphp验证场景里面的多个属性之间是逗号 一.总结 一句话总结:因为是数组啊 1 protected $scene ...

  6. 133.throw机制 抛出类类型

    #include <iostream> using namespace std; //try尝试执行,抛出throw,throw之后语句不再执行 //catch处理throw的异常 voi ...

  7. string的一些操作

    //str.insert(1, "bbb"); //str.erase(5);//删除5以后的数字 //str.erase(str.begin()+2);//删除某个字符 //co ...

  8. BZOJ 4289: PA2012 Tax(最短路)

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 755  Solved: 240[Submit][Status][Discuss] Descriptio ...

  9. JavaScript学习——表格的隔行换色+高亮显示

    1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th&g ...

  10. springmvc两种非注解的处理器适配器

    <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...