1、步骤分析：

第一步：引入jquery的类库

第二步：直接写页面加载函数

第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)

第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。

2、具体代码实现：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>使用jQuery完成表格隔行换色</title>

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

         <script>

             //1.页面加载

             $(function(){

                 //2.获取tbody下面的偶数行并设置背景颜色

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

                 //3.获取tbody下面的奇数行并设置背景颜色

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

             });

         </script>

     </head>

     <body>

         <table border="1" width="500" height="50" align="center" id="tbl" 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>

3、真正开发时一般CSS样式已经由美工写好，此时可以使用jquery的CSS类操作

具体代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>使用jQuery完成表格隔行换色</title>

         <link rel="stylesheet" href="../css/style.css" />

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

         <script>

             //1.页面加载

             $(function(){

                 //2.获取tbody下面的偶数行并设置背景颜色

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

                 //3.获取tbody下面的奇数行并设置背景颜色

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

             });

         </script>

     </head>

     <body>

         <table border="1" width="500" height="50" align="center" id="tbl" 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>

在谷歌浏览器内运行，就实现了表格隔行换色的效果。

jQuery学习(四)——使用JQ完成表格隔行换色的更多相关文章

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

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

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

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

  3. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

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

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

  5. table 表格隔行换色实现

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

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

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

  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. ES6 | ES6新语法 在编码实践中的应用

    本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的.易于阅读和维护的代码. 多家公司和组织已经公开了它们的风格规范,本文的内容主要参考了  ...

  2. javascript中构造函数的说明

    1.1 构造函数是一个模板 构造函数,是一种函数,主要用来在创建对象时对 对象 进行初始化(即为对象成员变量赋初始值),并且总是与new运算符一起使用. 1.2 new 运算符 new运算符创建一个新 ...

  3. Unity坐标系 左手坐标系 图

    x轴:从左指向右 y轴:从下指向上 z轴:指向屏幕里的是左手坐标系,指向屏幕外的是右手坐标系 记忆小技巧:都是X轴朝右,Y轴向上,跟平时画坐标一模一样,区别只是Z的朝向.你用手试一下就知道了,当大拇指 ...

  4. IDEA创建Maven工程依赖jar包爆红问题

    使用IDEA创建maven工程后,在pom.xml文件中添加jar包坐标依赖后报错, 如图:

  5. virtualenv和virtualenvwrapper的安装与使用

    环境 Windows 10 python 3.6.7 virtualenv 安装 virtualenv用于创建虚拟环境,用于隔离不同的python版本的运行,是容器类软件.这里在Windows下通过p ...

  6. oracle中nvl函数用法

    1.返回两个字段中非空字段的值,第一个字段非空,返回第一个字段的值,第二个字段值为null,则返回第二个字段的值,如果都为null 则返回null. select nvl(a,b) from tabl ...

  7. async-validator 的中文文档翻译

    阿里出品的 antd 和 ElementUI 组件库中表单校验默认使用的 async-validator,它在 gitbub 上也获得了 3.8k 的 star,可见这个库十分强大,奈何只有英文文档看 ...

  8. wordpress 拾遗

    wordpress 拾遗 运行环境 php mySQL Apache 集成开发环境 Appserv xampp phpstudy 文章和页面的区别 文章是发布网站主要内容的地方,比如博客的文章,商城的 ...

  9. [NOIP2012提高组]开车旅行

    题目:洛谷P1081.Vijos P1780.codevs1199. 题目大意:有n座海拔高度不相同的城市(编号1~n),两城市的距离就是两城市海拔之差.规定每次只能从编号小的城市走到编号大的城市. ...

  10. [读书笔记] Python数据分析 （四） 数组和矢量计算

    Numpy:高性能计算和数学分析的基础包 ndarray, 一个具有矢量算术运算和复杂广播能力的快速且节省空间的多维数组 用于对数组数据进行快速运算的标准数学函数 用于读写磁盘数据的工具和用于操作内存 ...