JQ实现表格的隔行换色 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>表格的隔行换色</title>
 6         <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
 7         
 8         <script>
 9             $(function(){
10                 $("tr:even:gt(0)").css("background-color","cadetblue");
11                 $("tr:odd").css("background-color","coral");
12             });
13         </script>
14     </head>
15     <body>
16         <table border="1px" width="600px" id="table">
17             <tr>
18                 <td><input type="checkbox"/></td>
19                 <td>分类ID</td>
20                 <td>分类名称</td>
21                 <td>分类商品</td>
22                 <td>分类描述</td>
23                 <td>操作</td>
24             </tr>
25             <tr>
26                 <td><input type="checkbox"/></td>
27                 <td>1</td>
28                 <td>手机数码</td>
29                 <td>华为,小米,vivo</td>
30                 <td>手机</td>
31                 <td>
32                     <a href="#">修改</a>|<a href="#">删除</a>
33                 </td>
34             </tr>
35             <tr>
36                 <td><input type="checkbox"/></td>
37                 <td>2</td>
38                 <td>电脑办公</td>
39                 <td>华为,小米,联想</td>
40                 <td>电脑</td>
41                 <td>
42                     <a href="#">修改</a>|<a href="#">删除</a>
43                 </td>
44             </tr>
45             <tr>
46                 <td><input type="checkbox"/></td>
47                 <td>3</td>
48                 <td>水果蔬菜</td>
49                 <td>苹果,香蕉,番茄</td>
50                 <td>补充维生素</td>
51                 <td>
52                     <a href="#">修改</a>|<a href="#">删除</a>
53                 </td>
54             </tr>
55             <tr>
56                 <td><input type="checkbox"/></td>
57                 <td>4</td>
58                 <td>馋嘴零食</td>
59                 <td>辣条,牛肉干,薯片</td>
60                 <td>年货</td>
61                 <td>
62                     <a href="#">修改</a>|<a href="#">删除</a>
63                 </td>
64             </tr>
65             <tr>
66                 <td>
67                     <input type="checkbox" />
68                 </td>
69                 <td>5</td>
70                 <td>床上用品</td>
71                 <td>床单,被套,四件套</td>
72                 <td>都是布的</td>
73                 <td><a href="#">修改</a>|<a href="#">删除</a></td>
74             </tr>
75         </table>
76     </body>
77 </html>

 

posted @ 2020-04-10 11:48  yxfyg  阅读(209)  评论(0)    收藏  举报