<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. 结合JDK源码看设计模式——迭代器模式

    前言: Iterator翻译过来就是迭代器的意思.在前面的工厂模式中就介绍过了iterator,不过当时介绍的是方法,现在从Iterator接口的设计来看,似乎又是一种设计模式,下面我们就来讲讲迭代器 ...

  2. Echarts 南海诸岛简图显示位置调整

        最近需要echart同时显示海南岛和南海诸岛,开始想寻找南海诸岛的数据,经过查找,这种简图数据是没有的(china.js地图数据一一找过了),下图是echarts的一些示例,没有满足我们的要求 ...

  3. C#中关于表达式与委托在EF中的不同表现总结

    Func<Invoice, bool> func = x => x.State == InvoiceState.Created; Expression<Func<Invo ...

  4. 章节八、3-如何用Chrome开发者工具查看元素

    一.如何使用开发者工具,操作步骤与火狐浏览器一致(此处不重复叙述,此处主要描述如何查找元素是否存在以及元素在页面中是否重复). 1.打开开发者选项,然后按“ctrl+f”,会出现一个输入框在输入框中输 ...

  5. Loj #2192. 「SHOI2014」概率充电器

    Loj #2192. 「SHOI2014」概率充电器 题目描述 著名的电子产品品牌 SHOI 刚刚发布了引领世界潮流的下一代电子产品--概率充电器: 「采用全新纳米级加工技术,实现元件与导线能否通电完 ...

  6. asp.net core 2.0的认证和授权

    在asp.net core中,微软提供了基于认证(Authentication)和授权(Authorization)的方式,来实现权限管理的,本篇博文,介绍基于固定角色的权限管理和自定义角色权限管理, ...

  7. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染（个人博客二）

    缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...

  8. 支持向量机（SVM）之数学公式详细推导

    一.概述 1.含义: 支持向量机(support vector machine,SVM)是一种二类分类器,它的基本模型是定义在特征空间上的间隔最大化的线性分类器,通过引入核函数,也可以作为非线性分类器 ...

  9. IDEA指定.class文件输出位置

    1.File > Project Structure > Project > Project compiler output  项目中的默认编译输出总目录 2.我习惯于把.class ...

  10. 【Android Studio安装部署系列】三十五、从Android studio3.0.1升级到Android studio3.1.4【以及创建android p模拟器的尝试（未成功）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 因为想要使用Android P模拟器,所以需要将Android Studio升级到3.1版本以上. Android P模拟器的最低版 ...