本文實例講述了jquery實現表格隔行換色效果的代碼。分享給大家供大家參考。具體如下：
運行效果截圖如下：
具體代碼如下：
1、新建一個web項目，jQuery；
2、在WebContent目錄下新建script文件夾，將jquery-1.10.1.js復制到script中；
3、同樣，新建TableColor.html；
TableColor.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表格間隔色</title> <script type="text/javascript" src="script/jquery-1.10.1.js"></script> <style type="text/css"> body { width:100%; height:100%; font-size:12px; } table { width:80%; height:90%; } .tr_odd { background: #EBF2FE; } .tr_even { background: #B4CDE6; } .tab_body { text-align: center; } </style> <script type="text/javascript"> $(function(){ $("tr:odd").addClass("tr_odd"); $("tr:even").addClass("tr_even"); }); </script> </head> <body> <table> <tr style="background: #CCCCCC;text-align: center;"> <th>學號</th> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr class="tab_body"> <td>2013060101</td> <td>張華</td> <td>23</td> <td>男</td> </tr> <tr class="tab_body"> <td>2013060102</td> <td>趙雪</td> <td>24</td> <td>女</td> </tr> <tr class="tab_body"> <td>2013060103</td> <td>孫旭</td> <td>21</td> <td>男</td> </tr> <tr class="tab_body"> <td>2013060104</td> <td>李姝</td> <td>20</td> <td>女</td> </tr> <tr class="tab_body"> <td>2013060105</td> <td>公孫旭</td> <td>22</td> <td>男</td> </tr> <tr class="tab_body"> <td>2013060106</td> <td>李枝花</td> <td>24</td> <td>女</td> </tr> <tr class="tab_body"> <td>2013060107</td> <td>魏征</td> <td>22</td> <td>男</td> </tr> <tr class="tab_body"> <td>2013060108</td> <td>施禮</td> <td>20</td> <td>女</td> </tr> <tr class="tab_body"> <td>2013060109</td> <td>王志</td> <td>23</td> <td>男</td> </tr> <tr class="tab_body"> <td>2013060104</td> <td>方小許</td> <td>20</td> <td>女</td> </tr> </table> </body> </html> 以上就是本文的全部內容，希望對大家學習javascript程序設計有所幫助。
新聞熱點
疑難解答
