jquery 表格（鼠标悬停改变改变行背景+隔行换色）

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');

 

 

 

转载于:https://www.cnblogs.com/wenzichiqingwa/archive/2012/12/03/2799271.html

总结

以上是生活随笔为你收集整理的jquery 表格（鼠标悬停改变改变行背景+隔行换色）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。