前端简单入门第十八讲使用jQuery实现表格的隔行换色

还记得之前我使用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实现表格的隔行换色相关推荐

R plot图片背景设置为透明_R语言入门第十二讲：基础绘图（二）------plot与par函数（1）...
上一次给大家简单展示了plot函数的用法,以及par函数的使用.今天我们继续应用这两个函数,看看它的其他功能. 下面这个图是数据的一部分[1].我一直认为,作图简单,但关键是要知道数据在数据库中的格式 ...
maven快速入门第十四讲——nexus私服简介及安装
nexus是什么? nexus是maven仓库管理器,通过nexus可以搭建maven仓库,同时nexus还提供了强大的仓库管理功能,构件搜索功能等. 私服是什么? 公司在自己的局域网内搭建的自己的远 ...
零基础语法入门第十九讲一般现在时和现在进行时
英语中动词的用法最为丰富,动词可以体现主语的数量,也可以体现主语的时间和状态- 一般现在时,表示通常性.规律性.习惯性的状态和动作,主语时第三人称单数,动词有单三的变化,主语是非第三人称单数时,动词为 ...
前端html利用CSS实现table表格斑马纹隔行换色效果
在网页中,表格是一种常用的数据展示方式,如下面的实例就是一个收支数据的表格. <!DOCTYPE html> <html lang="en"><hea ...
QT入门第十四天串口通信协议+收发数据+波特率+数据位+停止位+奇偶校验+串口识别射频RFID的卡号
QT入门第十四天串口通信[QT入门第十四天串口通信协议+收发数据+波特率+数据位+停止位+奇偶校验+串口识别射频RFID的卡号第一章常见的硬件通信接口协议 [1]硬件通信接口协议 [2]使用串 ...
QT入门第十天 QT安装和使用alsa库和jpeg库实现音视频录制
QT入门第十天QT安装和使用alsa库和jpeg库实现音视频录制第一章 ALSA库的移植和使用 1.ALSA简介 2.移植ALSA (1)移植步骤 3.把移植好的库下载到开发板配置 4.使用移植好的 ...
2021-11-16----韩顺平Java入门第十天
韩顺平Java入门第十天 1.swith分支结构基本语法流程图快速入门 //请编写一个程序,该程序可以接收一个字符, //比如:a,b,c,d,e,f,g a 表示星期一 ...
名词解释第十八讲：糖果
这里是王团长区块链学院,与最优秀的区块链人一起成长!今天给大家讲讲糖果. 点击观看视频教程:名词解释第十八讲:糖果我们经常会在朋友圈看到一些关于领取免费糖果的宣传海报,对于了解区块链的人来说这没有什 ...
趣谈网络协议笔记-二（第十八讲）
趣谈网络协议笔记-二(第十八讲) DNS协议:网络世界的地址簿自勉勿谓言之不预也 -- 向为祖国牺牲的先烈致敬! 正文 DNS用于域名解析,但也不仅仅是用于域名解析,不仅仅是将域名转换成IP. 在 ...

前端简单入门第十八讲使用jQuery实现表格的隔行换色

前端简单入门第十八讲使用jQuery实现表格的隔行换色相关推荐

最新文章

热门文章

前端简单入门第十八讲 使用jQuery实现表格的隔行换色

前端简单入门第十八讲 使用jQuery实现表格的隔行换色相关推荐

最新文章

热门文章

前端简单入门第十八讲使用jQuery实现表格的隔行换色

前端简单入门第十八讲使用jQuery实现表格的隔行换色相关推荐