zoukankan      html  css  js  c++  java
  • jQuery学习(四)——使用JQ完成表格隔行换色

    1、步骤分析:

    第一步:引入jquery的类库

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

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

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

    2、具体代码实现:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>使用jQuery完成表格隔行换色</title>
     6         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
     7         <script>
     8             //1.页面加载
     9             $(function(){
    10                 //2.获取tbody下面的偶数行并设置背景颜色
    11                 $("tbody tr:even").css("background-color","gold");
    12                 //3.获取tbody下面的奇数行并设置背景颜色
    13                 $("tbody tr:odd").css("background-color","pink");
    14             });
    15         </script>
    16     </head>
    17     <body>
    18         <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
    19             <thead>
    20                 <tr>
    21                     <th>编号</th>
    22                     <th>姓名</th>
    23                     <th>年龄</th>
    24                 </tr>
    25             </thead>
    26             <tbody>
    27                 <tr >
    28                     <td>1</td>
    29                     <td>张三</td>
    30                     <td>22</td>
    31                 </tr>
    32                 <tr >
    33                     <td>2</td>
    34                     <td>李四</td>
    35                     <td>25</td>
    36                 </tr>
    37                 <tr >
    38                     <td>3</td>
    39                     <td>王五</td>
    40                     <td>27</td>
    41                 </tr>
    42                 <tr >
    43                     <td>4</td>
    44                     <td>赵六</td>
    45                     <td>29</td>
    46                 </tr>
    47                 <tr >
    48                     <td>5</td>
    49                     <td>田七</td>
    50                     <td>30</td>
    51                 </tr>
    52                 <tr >
    53                     <td>6</td>
    54                     <td>汾九</td>
    55                     <td>20</td>
    56                 </tr>
    57             </tbody>
    58         </table>
    59     </body>
    60 </html>

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

    具体代码如下:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>使用jQuery完成表格隔行换色</title>
     6         <link rel="stylesheet" href="../css/style.css" />
     7         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
     8         <script>
     9             //1.页面加载
    10             $(function(){
    11                 //2.获取tbody下面的偶数行并设置背景颜色
    12                 $("tbody tr:even").addClass("even");
    13                 //3.获取tbody下面的奇数行并设置背景颜色
    14                 $("tbody tr:odd").addClass("odd");
    15             });
    16         </script>
    17     </head>
    18     <body>
    19         <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
    20             <thead>
    21                 <tr>
    22                     <th>编号</th>
    23                     <th>姓名</th>
    24                     <th>年龄</th>
    25                 </tr>
    26             </thead>
    27             <tbody>
    28                 <tr >
    29                     <td>1</td>
    30                     <td>张三</td>
    31                     <td>22</td>
    32                 </tr>
    33                 <tr >
    34                     <td>2</td>
    35                     <td>李四</td>
    36                     <td>25</td>
    37                 </tr>
    38                 <tr >
    39                     <td>3</td>
    40                     <td>王五</td>
    41                     <td>27</td>
    42                 </tr>
    43                 <tr >
    44                     <td>4</td>
    45                     <td>赵六</td>
    46                     <td>29</td>
    47                 </tr>
    48                 <tr >
    49                     <td>5</td>
    50                     <td>田七</td>
    51                     <td>30</td>
    52                 </tr>
    53                 <tr >
    54                     <td>6</td>
    55                     <td>汾九</td>
    56                     <td>20</td>
    57                 </tr>
    58             </tbody>
    59         </table>
    60     </body>
    61 </html>

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

  • 相关阅读:
    6-hadoop的运行模式(完全分布式)(上)
    5-hadoop的运行模式(伪分布式)
    4-hadoop的运行模式(本地)
    3-hadoop-安装hadoop
    2-hadoop-Hadoop以及生态
    word文档在线预览解决方案
    那些有意思的Github
    Git
    squid,nginx,lighttpd反向代理的区别
    redhat6 改 centos yum 源
  • 原文地址:https://www.cnblogs.com/cxq1126/p/7423990.html
Copyright © 2011-2022 走看看