Question

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

HTML code：

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

Answer 2

您可以使用此CSS来实现在tr上更改背景所需的行为，不包括第一个，而不使用JavaScript：

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

Answer 3

你可以改用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>

然后

$(document).on('mouseenter', 'table tbody tr', function....

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

3 个答案: