jQuery学习(四)——使用JQ完成表格隔行换色

最新推荐文章于 2021-03-30 10:41:39 发布

anjiukonghe77852

最新推荐文章于 2021-03-30 10:41:39 发布

阅读量146

点赞数

原文链接：http://www.cnblogs.com/cxq1126/p/7423990.html

版权

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>

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

转载于:https://www.cnblogs.com/cxq1126/p/7423990.html

anjiukonghe77852

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习(四)——使用JQ完成表格隔行换色

1、步骤分析：第一步：引入jquery的类库第二步：直接写页面加载函数第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。2、具体代码实现： 1 <!DOCTYPE html> 2 <html> 3 ...
复制链接

扫一扫