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. element-ui自定义table表头，修改列标题样式

    elementUI table表格一般的样式是这样的: 但是要改变表头是比较麻烦的一个事情,但是往往有些项目是需要的比如改成如下样式: 一般直接改起来挺麻烦,好在官网提供了一个方法:render-he ...

  2. 基于Doxygen的C/C++注释原则

    基于Doxygen的C/C++注释原则 标注总述 .文件头标注 . 命名空间标注 . 类.结构.枚举标注 . 函数注释原则 . 变量注释 . 模块标注 . 分组标注 总述 华丽的分隔线 //----- ...

  3. SQL CASE WHEN语句性能优化

    背景:性能应该是功能的一个重要参考,特别是在大数据的背景之下!写SQL语句时如果仅考虑业务逻辑,而不去考虑语句效率问题,有可能导致严重的效率问题,导致功能不可用或者资源消耗过大.其中的一种情况是,处理 ...

  4. Anaconda3 安装报错 bunzip2: command not found

    报错信息 Anaconda3-5.3.1-Linux-x86_64.sh: line 353: bunzip2: command not found tar: This does not look l ...

  5. WePy--使用zanUI组件

    因为Wepy 中不能直接引入zanUI组件, 好在还有百度, 参考链接 https://github.com/brucx/wepy-zanui-demo (感谢); 我的做法是将 源码下了下来, 源码 ...

  6. NOI 2011 阿狸的打字机 (AC自动机+dfs序+树状数组)

    题目大意:略(太长了不好描述) 良心LOJ传送门 先对所有被打印的字符串建一颗Trie树 观察数据范围,并不能每次打印都从头到尾暴力建树,而是每遍历到一个字符就在Trie上插入这个字符,然后记录每次打 ...

  7. freeswitch 注册错误408 - Request Timeout

    1.网络不通(可能虚拟机没打开网络) 2.防火墙没有过滤端口号(关闭防火墙) 3.IP地址错误

  8. async、await 优缺点

    async.await 优缺点 async 和 await 相比直接使用 Promise 来说,优势在于处理 then 的调用链,能够更清晰准确的写出代码.缺点在于滥用 await 可能会导致性能问题 ...

  9. java静态方法

    静态方法(全局方法)不能访问this(当前对象)它和类没有关系,会有逻辑错误,当调用静态方法的时候不需要创建对象 可以直接为boolean result = MyTest.isPrime();直接访问 ...

  10. 数人云CTO解读Docker 1.12和金融业容器化

    7月29日 数人云 在上海举办金融沙龙,邀请上交所和近二十家来自银行.保险.证券的IT技术专家一同探讨容器技术在金融业中的最佳实践.数人云CTO肖德时在会上将传统金融行业通过容器可以解决的四大问题做了 ...