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

我的站点上几乎没有表，我正在尝试编写两个函数。
第一个功能是检查鼠标是否在该行上，然后设置该行的背景色。
第二个功能是检查鼠标是否离开一行，然后删除背景色。
但我尽量避免每张桌子的第一排

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>

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

当我在第一个表的第一行输入鼠标时，不会发生任何事情（没关系！）
但是当我进入第二个表的第一行时，它将被更改

---

谢谢

使用

第一个孩子

而不是

第一个孩子

<代码>第一个仅选择第一个元素，而

第一个子元素

选择所有第一个子元素

$(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", "");
});

---

使用

first child

而不是

first

<代码>第一个仅选择第一个元素，而

第一个子元素

选择所有第一个子元素

$(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", "");
});

---

您可以使用此CSS实现在

tr

上更改背景的所需行为，而不使用JavaScript：

tr:not(:first-child):hover {
    background: orange;
}

---

您可以使用此CSS实现在

tr

上更改背景的所需行为，而不使用JavaScript：

tr:not(:first-child):hover {
    background: orange;
}

---

你可以用thead和tbody来代替

<table>
    <thead>
        <tr><td>Name</td></tr>
    </thead>
    <tbody>
        <tr><td>Someone</td></tr>
        <tr><td>Someone</td></tr>
        <tr><td>Someone</td></tr>
    </tbody>
</table>

---

你可以用thead和tbody来代替

<table>
    <thead>
        <tr><td>Name</td></tr>
    </thead>
    <tbody>
        <tr><td>Someone</td></tr>
        <tr><td>Someone</td></tr>
        <tr><td>Someone</td></tr>
    </tbody>
</table>

---

你不能只用CSS来实现你想要的行为吗？你不能只用CSS来实现你想要的行为吗？