javascript - 将 CSS 类应用于所有行但不应用于表标题

Question

我正在尝试应用 css 样式来更改 HTML 表格中单击行的颜色。在点击事件中，我添加了类(选定行)。现在，单击每列的标题时，我的表具有排序功能。标题变色，这不是我想要的。我只想要行而不是标题。所以，我改变了我的风格(不是第一个 child )。现在，标题和第一行不会改变颜色。当我添加选定行类时，我只需要标题不改变颜色，所有其他行改变颜色。

.selected-row:not(:first-child) {
    background-color: brown;
    color: #FFF;
}

            $("#example tr").click(function () {
                $(this).addClass('selected-row').siblings().removeClass('selected-row');


            });

Answer 1

如果您用 <thead> 标记您的表格包含标题行，<tbody>要包含数据行，您可以专门针对仅表体中的行 - 就像在 CSS 中这样:

tbody > tr { }

在 jQuery 中就像这样:

$('#example tbody > tr')...

表格标记:

<table>
    <caption>This table contains...</caption>
    <thead>
        <tr>
            <th>Heading</th>
            <th>Heading</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$50</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Item 1</td>
            <td>$20</td>
        </tr>
        <tr>
            <td>Item 2</td>
            <td>$30</td>
        </tr>
    </tbody>
</table>