一天搞定jQuery(二)——使用jQuery实现表格的隔行换色

来源：互联网发布：oracle数据库表空间编辑：程序博客网时间：2024/06/06 01:40

还记得之前我使用JavaScript来实现表格的隔行换色效果吗？如果读者初次翻阅本文，可记得看看教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色！现在我就来使用jQuery完成对数据表格进行隔行换色的显示效果，显示效果为：
这里写图片描述
要实现该效果，必然要了解以下两个知识点：

jQuery的基本过滤选择器：
- :odd：匹配所有索引值为奇数的元素，从0开始计数
- :even：匹配所有索引值为偶数的元素，从0开始计数
jQuery中添加和移除样式的方法
如果样式没有事先定义，那么可以使用css方法为奇数行或者偶数行设置背景颜色；如果已经在css文件中事先将样式定义好了，那么就不能使用css方法了，须使用jQuery中的CSS类中的方法：
- addClass(class)：为每个匹配的元素添加指定的类名，即添加某个样式。
- removeClass(class)：从所有匹配的元素中删除全部或者指定的类，即移除某个样式。

下面按照如下步骤来使用jQuery完成对数据表格进行隔行换色的显示效果：

创建一个HTML页面，最重要的一个页面就是后台数据展示表格的页面
引入jQuery的js文件
在页面加载的函数中，选择奇数行，添加样式
在页面加载的函数中，选择偶数行，添加样式

我摘出最重要的一个页面，即后台数据展示表格的页面——【data.html】：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" href="../css/style.css" />        <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>    </head>    <body>        <table id="tab1" border="1" width="80%" align="center">            <tr>                <td>分类的ID</td>                <td>分类的名称</td>                <td>分类的描述</td>                <td>操作</td>            </tr>            <tr>                <td>1</td>                <td>手机数码</td>                <td>手机数码</td>                <td><a href="">修改</a>|<a href="">删除</a></td>            </tr>            <tr>                <td>2</td>                <td>电脑办公</td>                <td>电脑办公</td>                <td><a href="">修改</a>|<a href="">删除</a></td>            </tr>            <tr>                <td>3</td>                <td>烟酒糖茶</td>                <td>烟酒糖茶</td>                <td><a href="">修改</a>|<a href="">删除</a></td>            </tr>            <tr>                <td>4</td>                <td>鞋靴箱包</td>                <td>鞋靴箱包</td>                <td><a href="">修改</a>|<a href="">删除</a></td>            </tr>            <tr>                <td>5</td>                <td>汽车用品</td>                <td>汽车用品</td>                <td><a href="">修改</a>|<a href="">删除</a></td>            </tr>        </table>    </body></html>

接着编写jQuery代码完成对数据表格进行隔行换色的显示效果：

<script>    $(function() {        $("tr:odd").addClass("odd");        $("tr:even").addClass("even");    });</script>

这样一来，表格中的第一行也变换颜色了。如果我们不想让第一行变换颜色，那么可结合使用表格中的tbody和thead标签来完成。
首先将【data.html】页面的内容改为：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" href="../css/style.css" />        <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>    </head>    <body>        <table id="tab1" border="1" width="80%" align="center">            <thead>                <tr>                    <th>分类的ID</th>                    <th>分类的名称</th>                    <th>分类的描述</th>                    <th>操作</th>                </tr>            </thead>            <tbody>                <tr>                    <td>1</td>                    <td>手机数码</td>                    <td>手机数码</td>                    <td><a href="">修改</a>|<a href="">删除</a></td>                </tr>                <tr>                    <td>2</td>                    <td>电脑办公</td>                    <td>电脑办公</td>                    <td><a href="">修改</a>|<a href="">删除</a></td>                </tr>                <tr>                    <td>3</td>                    <td>烟酒糖茶</td>                    <td>烟酒糖茶</td>                    <td><a href="">修改</a>|<a href="">删除</a></td>                </tr>                <tr>                    <td>4</td>                    <td>鞋靴箱包</td>                    <td>鞋靴箱包</td>                    <td><a href="">修改</a>|<a href="">删除</a></td>                </tr>                <tr>                    <td>5</td>                    <td>汽车用品</td>                    <td>汽车用品</td>                    <td><a href="">修改</a>|<a href="">删除</a></td>                </tr>            </tbody>        </table>    </body></html>

然后编写jQuery代码完成后台数据展示表格的隔行换色：

<script>    $(function() {        $("tbody tr:odd").addClass("odd");        $("tbody tr:even").addClass("even");    });</script>

读者如需查看源码，可参考一天搞定jQuery(二)——使用jQuery表格的隔行换色！

0 0