jquery实现表格隔行换色效果

本文实例讲述了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程序设计有所帮助。