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 first-child 。 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來實現預期的行為，即在不使用JavaScript的情況下，在tr上改變背景（不包括第一個）：

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