javascript - JQuery HTML 避免每个表中的第一行

Question

我的网站上有几个表，我正在尝试编写 2 个函数。
第一个功能是检查鼠标是否在该行上，然后设置该行的背景颜色。
第二个功能是检查鼠标是否离开一行，然后删除背景颜色。
但我试图避免每个表的第一行

HTML 代码:

<table>
    <tr><td>Name</td></tr>
    <tr><td>David</td></tr>
    <tr><td>Lukas</td></tr>
</table>
<table>
    <tr><td>Something Else</td></tr>
    <tr><td>John</td></tr>
    <tr><td>Pedro</td></tr>
</table>

JQuery 代码:

$(document).on('mouseenter', 'table tr:not(:first)', function () {
    $(this).css("background", "orange");
});

$(document).on('mouseleave', 'table tr:not(:first)', function () {
    $(this).css("background", "");
});

我必须使用“.on”，因为第二个表是通过 Ajax 请求加载的。

当我在第一个表格的第一行输入鼠标时，什么也不会发生(没关系!)
但是当我进入第二个表的第一行时，它就会改变

谢谢!

Answer 1

使用first-child而不是first。 fisrt 仅选择第一个元素，而 first-child 选择所有第一个子元素。

$(document).on('mouseenter', 'table tr:not(:first-child)', function () {
    $(this).css("background", "orange");
});

$(document).on('mouseleave', 'table tr:not(:first-child)', function () {
    $(this).css("background", "");
});