<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. 海思Hi3559A/CV100 DDR4驱动配置手册

    Hi3559AV100 DDR4 驱动配置说明 1.1 Hi3559AV100 DDR4 CLK/AC 驱动配置方法 寄存器地址 DDR PHY0:0x1206d0bc DDR PHY1:0x1206 ...

  2. SQL Server中是否可以准确获取最后一次索引重建的时间？

    在SQL Server中,我们能否找到索引的创建时间?最后一次索引重建(Index Rebuild)的时间? 最后一次索引重组(INDEX REORGANIZE)的时间呢?  答案是我们无法准确的找到 ...

  3. Centos7.3离线(rpm方式)安装mysql服务

    1.mysql官网下载安装包,官网地址:www.mysql.com [root@seiang software]# ll total 580020 -rw-r--r--. 1 root root 59 ...

  4. vue项目使用 prerender-spa-plugin 预渲染

    由于项目要做seo优化,而用vue写成的spa页面谷歌浏览器等是抓取不到数据的.介于ssr和预渲染来说,后者相对来说要简单许多.所以采用了预渲染方式.采用插件prerender-spa-plugin使 ...

  5. CAP 2.4版本发布，支持版本隔离特性

    前言 自从上次 CAP 2.3 版本发布 以来,已经过去了几个月的时间,这几个月比较忙,所以也没有怎么写博客,趁着2019年到来之际(现在应该是2019年开始的时候),CAP也发布了2018年的最后一 ...

  6. Java三种方式实现栈和队列

    栈:LIFO(后进先出) 队列:FIFO(先进先出) 1.栈:LIFO(后进先出) 1.1.栈的顺序存储结构实现: /** * 基于数组实现的顺序栈 * @param <E> */ pub ...

  7. python --- 插入排序算法

    先上一张图,看看能不能从里面悟出些什么: 问题的解决思路: 就是当插入第i个的时候,前面的[i- 1]个已经排好了,这时候lst[i]就倒过来逐个和前面的关键字顺序进行比较,找到插入位置即将lst[i ...

  8. 腾讯短信服务精简版（PHP )

    短信视乎已经被慢慢淡出平常的交流工具队列,但始终抹不去它的存在,短信验证码视乎从未被取代,此外在重要的信息通知的地位也是不可取的的.所以了解短信的使用是开发中很有必要的一环. 腾讯云的短信服务提供有1 ...

  9. Linux知识要点大全（第四章）

    第四章 文件管理 *主要内容 文件和目录的操作: ①创建 ②删除 ③拷贝 ④重命名(剪切) ⑤查看 一:目录的操作 回顾与目录相关的命令 ls  查看目录中的内容 .pwd 打印当前目录   .cd  ...

  10. Nosql与关系型数据库不同的使用场景

    Nosql 1.适合存储非结构化数据存储,数据量且不可预期.如:评论,文章 2.排行榜数据获取,实时更新的数据.如:游戏榜排名,用户投票 3.限时抢购活动.如:淘宝抢购活动 4.反垃圾系统.如:敏感词 ...