NUM1:鼠标悬停改变改变行背景;
NUM2:隔行换色;
HTML:
<table border="1"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>小文</td> <td>20</td> <td>男</td> </tr> <tr> <td>小李</td> <td>21</td> <td>男</td> </tr> <tr> <td>小慧</td> <td>21</td> <td>女</td> </tr> <tr> <td>琪琪</td> <td>19</td> <td>女</td> </tr> <tr> <td>小勇</td> <td>22</td> <td>男</td> </tr> <tr> <td>馨儿</td> <td>23</td> <td>女</td> </tr> <tr> <td>小鹏</td> <td>21</td> <td>男</td> </tr> <tr> <td>鸭梨山大</td> <td>30</td> <td>男</td> </tr> </tbody> </table>
CSS:
.hover{ background-color: #00f; color: #fff; }
NUM1's jquery code:
$('tbody tr').hover(function(){ $(this).find('td').addClass('hover'); }, function(){ $(this).find('td').removeClass('hover'); });
NUM2's Jquery code:
$('tbody tr:odd').addClass('hover');