900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > jquery 表格(鼠标悬停改变改变行背景+隔行换色)

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

时间:2019-04-04 10:17:15

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。