<style type="text/css">

        html, body {

            margin: 0;

            padding: 0;

            font-size: 15px;

            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

        }

        ul {

            list-style: none;

            border: 1px solid #5bc0de;

            width: 600px;

            margin: 0 auto;

            padding: 0px;

        }

        li {

            padding: 10px 30px;

            cursor: pointer;

        }

        .c1 { /*奇数行颜色*/

            background-color: #5bc0de;

        }

        .c2 { /*偶数颜色*/

            background-color: #f7e1b5;

        }

        .c3 { /*移入颜色*/

            background-color: #999;

        }

    </style>

</head>

<body>

<ul>

    <li>A</li>

    <li>B</li>

    <li>A</li>

    <li>B</li>

    <li>A</li>

    <li>B</li>

    <li>A</li>

    <li>B</li>

</ul>

<script type="text/javascript">

 $("li:even").addClass("c2");

 $("li:odd").addClass("c1");

</script>

　

　JQ  :even选择器代表着选择偶数行

JQ   :odd 代表选择奇数行

JQ表格隔行换色的更多相关文章

  1. jQuery学习(四)——使用JQ完成表格隔行换色

    1.步骤分析: 第一步:引入jquery的类库 第二步:直接写页面加载函数 第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行) 第四步:分别使用CSS的方法(css( ...

  2. JQuery案例一：实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  4. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  5. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  6. JS应用实例4：表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  7. jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    实现表格隔行换色,且感应鼠标行变色的方法有很多,在本文将为大家介绍的是使用jQuery插件来实现,具体如下 看代码: : css代码:  

  8. javascript 表格隔行换色

    用到的知识点: 获取表格元素 tbody 和 rows都是有索引的 这里我们只有一组tbody所以 索引是0 偶数行 索引取余2为0 奇数行 索引取余2不为0 通过 遍历行索引设置相应的颜色. < ...

  9. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

随机推荐

  1. 2018-09-15 Java源码英翻中库以及服务原型

    服务很简单, 只为演示这个库, 源码在: program-in-chinese/code_translator_service. 在Postman测试效果: 演示服务地址: 74.91.17.250: ...

  2. cesium 之三维场景展示篇（附源码下载）

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  3. 初始scrapy,简单项目创建和CSS选择器,xpath选择器(1)

    一 安装 #Linux: pip3 install scrapy #Windows: a. pip3 install wheel b. 下载twisted http://www.lfd.uci.edu ...

  4. Storm入门（十三）Storm Trident 教程

    转自:http://blog.csdn.net/derekjiang/article/details/9126185 英文原址:https://github.com/nathanmarz/storm/ ...

  5. Java内存模型一个经典例子－指令重排序与CPU指令多发射导致执行结果异常

    先上代码: import java.util.concurrent.BrokenBarrierException; import java.util.concurrent.CyclicBarrier; ...

  6. 搭建微服务器：express+https+api代理

    概述 最近打算玩一下service worker,但是service worker只能在https下跑,所以查资料自己用纯express搭建了一个微服务器,把过程记录下来,供以后开发时参考,相信对其他 ...

  7. DataIntegrityViolationException

    今天出现了这个问题: org.springframework.dao.DataIntegrityViolationException: Could not execute JDBC batch upd ...

  8. Java Spring MVC框架搭建(一)

    环境准备 >>>>>>java JDK和tomcat,eclipse 1.创建项目 2.项目名称自定义,这边为demo 3.我们已经创建完一个动态网站的项目,还得下 ...

  9. MySQL配置参数说明

    MYSQL服务器my.cnf配置参数详解: 硬件:内存16G [client] port = 3306 socket = /data/mysql.sock [mysql] no-auto-rehash ...

  10. Python：用 peewee 框架连接 SQL Server

    Peewee 默认支持 Sqlite.MySQL.PostgreSQL 三种数据库,如果要使用其他数据库,需要同时安装扩展库.比如 SQL Server,需要安装 peewee-mssql. 但是安装 ...