<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. Morris遍历-如何用空间复杂度O(1)来遍历二叉树

    参照和学习: https://www.cnblogs.com/AnnieKim/archive/2013/06/15/morristraversal.html 解决的问题:如何使用空间复杂度O(1), ...

  2. hbase coprocessor 二级索引

    Coprocessor方式二级索引 1. Coprocessor提供了一种机制可以让开发者直接在RegionServer上运行自定义代码来管理数据.通常我们使用get或者scan来从Hbase中获取数 ...

  3. Android org.json.JSONArray cannot be converted to JSONObject

    今天在做Android项目移植的时候总是出现org.json.JSONArray cannot be converted to JSONObject异常,本着资源共享的理念,将异常处理过程以及引发该异 ...

  4. VS2017搭建驱动开发环境WDK

    先安装VS2017,然后在安装WDK,WDK会自动关联到VS2017中,不用你任何操作,自动在新建项目中可以找到驱动开发. 如果以上安装完成后,在VS2017中新建项目中没有发现WDK,那么需要进行修 ...

  5. 【Python实践-1】求一元二次方程的两个解

    知识点: import sys, sys模块包含了与Python解释器和它的环境有关的函数. “sys”是“system”的缩写.sys.exit() 中途退出程序, (注:0是正常退出,其他为不正常 ...

  6. 基于vue-cli构建vue-router的入门级demo

    前言 本案列仅针对刚刚入门vue学习的伙伴,博主也是刚刚在学基于vue-cli搭建脚手架项目,对于前端大牛,可以移步. 快速搭建vue-cli环境 如何搭建基于vue-cli项目,这里不再叙述,如果不 ...

  7. sklearn中的Pipeline

    在将sklearn中的模型持久化时,使用sklearn.pipeline.Pipeline(steps, memory=None)将各个步骤串联起来可以很方便地保存模型. 例如,首先对数据进行了PCA ...

  8. vue和mpvue

    一.mixins的理解     vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况 ...

  9. vue-cli3安装过程

    作为一个本来是java开发的搬运工,在公司前端人员缺乏的时候,就直接顶上来开发前台页面了(话说我已经很久很久没写java代码了(:′⌒`)) 好吧言归正传,刚开始弄前台就是vue,vue2还没弄熟,老 ...

  10. lib和dll文件的初了解

    lib,dll这两样东西在许多编程书中都很少出现,但实际工程中,这两样东西的作用确实非常重要,我觉得c++程序员都有必要了解这两样东西. 首先总共有 动态链接 和 静态链接 这两种链接方式 |静态链接 ...