这里是用JS实现的：http://www.cnblogs.com/xuyiqing/p/8376312.html

接下来利用上一篇提到的选择器利用jQuery实现：

发现原来多行代码这里只需要两行：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>表格隔行换色</title>

        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>

        <script>

            $(function(){

                $("tbody>tr:even").css("background-color","pink");

                $("tbody>tr:odd").css("background-color","aqua");

            });

        </script>

        <style>

        </style>

    </head>

    <body>

        <table border="1" width="500" height="50" align="center" id="tbl">

            <thead>

                <tr>

                    <th>编号</th>

                    <th>姓名</th>

                    <th>年龄</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>1</td>

                    <td>张三</td>

                    <td>22</td>

                </tr>

                <tr>

                    <td>2</td>

                    <td>李四</td>

                    <td>25</td>

                </tr>

                <tr>

                    <td>3</td>

                    <td>王五</td>

                    <td>27</td>

                </tr>

                <tr>

                    <td>4</td>

                    <td>小明</td>

                    <td>29</td>

                </tr>

                <tr>

                    <td>5</td>

                    <td>小红</td>

                    <td>30</td>

                </tr>

                <tr>

                    <td>6</td>

                    <td>小刚</td>

                    <td>20</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

更好的方式是直接为标签添加类：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>表格隔行换色</title>

        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>

        <script>

            $(function(){

                $("tbody>tr:even").addClass("even");

                $("tbody>tr:odd").addClass("odd");

            });

        </script>

        <style>

            .even{

                background-color: pink;

            }

            .odd{

                background-color: aqua;

            }

        </style>

    </head>

    <body>

        <table border="1" width="500" height="50" align="center" id="tbl">

            <thead>

                <tr>

                    <th>编号</th>

                    <th>姓名</th>

                    <th>年龄</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>1</td>

                    <td>张三</td>

                    <td>22</td>

                </tr>

                <tr>

                    <td>2</td>

                    <td>李四</td>

                    <td>25</td>

                </tr>

                <tr>

                    <td>3</td>

                    <td>王五</td>

                    <td>27</td>

                </tr>

                <tr>

                    <td>4</td>

                    <td>小明</td>

                    <td>29</td>

                </tr>

                <tr>

                    <td>5</td>

                    <td>小红</td>

                    <td>30</td>

                </tr>

                <tr>

                    <td>6</td>

                    <td>小刚</td>

                    <td>20</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

实际开发中是将样式写入css文件中link引入的，

这里为了方便展示写在一个文件中

jQuery应用实例2：表格隔行换色的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. table 表格隔行换色实现

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

  7. javascript 表格隔行换色

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

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

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

  9. jQuery表格隔行换色和全选的实现

    1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...

随机推荐

  1. tcp的发送端一个小包就能打破对端的delay_ack么？

    3.10内核,反向合入4.9的bbr. 最近分析bbr的时候,收集了线上的一些报文,其中有一个疑问一直在我脑海里面,如下: 本身处于delay_ack状态的客户端,大概40ms回复一个delay_ac ...

  2. Spring中@相关注解的意义

    1.@controller 控制器(注入服务) 用于标注控制层,相当于struts中的action层 2.@service 服务(注入dao) 用于标注服务层,主要用来进行业务的逻辑处理 3.@rep ...

  3. 【转】shell脚本执行时报"bad interpreter: Text file busy"的解决方法

    1)问题现象: 在ubuntu下执行以下脚本( while_count),报错: -bash: ./while_count: /bin/bash: bad interpreter: Text file ...

  4. 牛客网-乌龟跑步-（四维dfs）

    链接:https://ac.nowcoder.com/acm/problem/15294来源:牛客网 题目描述 有一只乌龟,初始在0的位置向右跑. 这只乌龟会依次接到一串指令,指令T表示向后转,指令F ...

  5. docker镜像加速器

    目前国内比较靠谱的镜像加速器网址:https://www.daocloud.io/mirror

  6. JQuery的可见性选择器

    1. <div id="test" style="width:400px;height:200; background:#0000ff;display:block; ...

  7. IPV4/IPV6双协议栈配置案例

    拓扑: XRV1配置: =================================================================== hostname XRV1! ipv6 ...

  8. Java的三种代理模式(Spring动态代理对象)

    Java的三种代理模式 1.代理模式 代理(Proxy)是一种设计模式,提供了对目标对象另外的访问方式;即通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,增强额外的功能操作,即扩 ...

  9. http 连接 analysis service (ssas)

    当数据仓库搭建好后,我们就可以通过sqlserver的管理工具查看服务器上的数据集了.但是这样挺不方便的,如果要远程访问,那么就可以通过http来连接数据仓库.要配置数据仓库http连接非常的简单.如 ...

  10. pythonj基础（五）元组和集合

    一,什么是元祖 Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 1.创建一个空元组 tu ...