jQuery的隔行换色 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>隔行换色</title>
 6     <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
 7     <script type="text/javascript">
 8         $(document).ready(function(){
 9             $("tr:even").not(":first").css("background","#eee");
10         });
11 
12         /*
13         window.onload = function() {
14             var rows = document.getElementsByTagName("tr");
15             for (var i = 0; i < rows.length; i++) {
16                 if (i % 2 == 0 && i != 0)
17                     rows[i].style.backgroundColor = "#eee";
18             }
19         };
20         */
21     </script>
22 </head>
23 <body>
24 <table id="orders">
25     <thead >
26         <tr style="background-color: #aaaaaa;">
27             <th>序号</th>
28             <th>订单号</th>
29             <th>商品名称</th>
30             <th>价格(元)</th>
31         </tr>
32     </thead>
33     <tr>
34         <td>1</td>
35         <td>10035900</td>
36         <td>Nike透气减震运动鞋</td>
37         <td>231.00</td>
38     </tr>
39     <tr>
40         <td>2</td>
41         <td>10036114</td>
42         <td>天美太阳伞</td>
43         <td>51.00</td>
44     </tr>
45     <tr>
46         <td>3</td>
47         <td>10035110</td>
48         <td>万圣节儿童蜘蛛侠装</td>
49         <td>31.00</td>
50     </tr>
51     <tr>
52         <td>4</td>
53         <td>10032900</td>
54         <td>jQuery权威指南</td>
55         <td>22.50</td>
56     </tr>
57 </table>
58 </body>
59 </html>

 

posted @ 2017-02-20 20:20  wuyongwork  阅读(459)  评论(0)    收藏  举报