1、步驟分析： 第一步：引入jquery的類庫 第二步：直接寫頁面載入函數 第三步：直接使用jquery的選擇器(組合選擇)拿到需要操作的元素(奇數行和偶數行) 第四步：分別使用CSS的方法(css(name,value))對奇數行和偶數行設置背景顏色。 2、具體代碼實現： 3、真正開發時一般CSS ...
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>
在谷歌瀏覽器內運行，就實現了表格隔行換色的效果。
