jquery 之选择器 :even and :odd

最新推荐文章于 2024-04-13 16:36:52 发布

原创最新推荐文章于 2024-04-13 16:36:52 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #border #class

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用jQuery实现表格中偶数行自动添加样式的方法，并通过鼠标悬停效果增强用户体验。具体实现了当鼠标悬停在表格行上时，该行会显示高亮效果。

:even and :odd

匹配集合中为偶数或是奇数元素的元素集合。索引以0开始。返回匹配元素集合

$(document).ready(function(){
// alert("congratulation!");
$(".stripe tr").mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
});

$(".stripe tr:even").addClass("alt");
});
</script>

<table class="stripe" width="400" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
    <th>姓名</td>
    <th>年龄</td>
    <th><p>Mail</p>
    </td>
</tr>
</thead>
<tbody>
<tr>
    <td>wangdingjun</td>
    <td>22</td>
    <td>xuyin3530@yahoo.com.cn</td>
</tr>
<tr>
    <td>蜗牛</td>
    <td>30</td>
    <td>leon3530@126.com</td>
</tr>
<tr>
    <td>Snail</td>
    <td>24</td>
    <td>wangdingjun0@gmail.com</td>
</tr>
<tr>
    <td> </td>
    <td> </td>
    <td> </td>
</tr>
</tbody>
</table>