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

JQuery HTML Avoid the first row in each table

本文关键字：一行 HTML JQuery      更新时间：2023-09-26


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

网页代码：

<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 请求加载的。

当我在第一个表的第一行输入鼠标时，什么都不会发生（没关系！
但是当我进入第二个表的第一行时，它会被改变

谢谢！

使用 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", "");
});
您可以使用

此 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>

然后

$(document).on('mouseenter', 'table tbody tr', function....
相关文章：