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. LInux学习之常用命令ls

    命令格式与目录处理命令ls 命令格式:  命令[-选项][参数] 例如:  ls -la /etc 说明: 1)个别命令使用不遵循此格式 2)当多个选项时,可以写在一起 3)简化选项与完整选项 -a  ...

  2. vue入门--简单嵌套路由的一个路径小问题

    假设现在有一个项目,刚进去要显示main页面下的contorl页面,那么路由里面的初级路由应该是{main和err},这两个是同一级,然后{control和set}是main下的子路由,foot是这两 ...

  3. datatable.rows.indexof（dr）返回的是啥？

    返回的是Int类型的 行索引值,从0开始.也就是说,第一行是0.最后一行就是rows.count - 1.不会返回-1."这是第" + OldDt.Rows.IndexOf(ite ...

  4. SSH三个主流框架环境的搭建

    part 1  Hibernate环境的搭建 part2  struts2环境的搭建 第一步:从struts2官网下载需要的各种资料和jar包 第二步:在ecplise里面创建web项目,然后在web ...

  5. Mongodb 启动关闭脚本并设置开机自动启动Mongodb

    配置文件内容:[root@yoon etc]# cat mongod.conf logpath=/export/log/mongodb.loglogappend=truefork = truedbpa ...

  6. C++下面关于字符串数组的一些操作

    今天在写一个搜索引擎的分词系统,是很简单的那种,但是居然费了我一天的时间还没完成,晚上估计还得弄一会了,但是在这个过程中,遇到了集中关于字符串数组的操作,值得和大家分享一下. 首先是关于统计字符串数组 ...

  7. 构造器参数过多时考虑使用构建器（Builder）

    一.静态工厂和构造器的局限性 面对需要大量可选参数才能构建对象时,静态工厂和构造器并不能随着可选参数的增加而合理扩展. 假设创建一个类Person需要使用大量的可选参数,其中两个参数是必填的,剩下的都 ...

  8. MySQL主从宕机的解决方法

    测试系统:centos6.5系统 测试环境IP地址划分: master: 192.168.80.130 slave:192.168.80.143 slave:192.168.80.146 首先模拟(M ...

  9. jquery 用于操作动态元素的delegate/on方法

    delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素). 在做项目中有很多由ajax动态生成的html标签,jquery对这些标签不会响应\((selector).c ...

  10. js 数组 : 差集、并集、交集、去重

    //input:[{name:'liujinyu'},{name:'noah'}] //output:['liujinyu','noah'] Array.prototype.choose = func ...