将 CSS 类应用于所有行，但不应用于表格标题答案

【问题标题】：Applying CSS class to all rows but not the table heading将 CSS 类应用于所有行，但不应用于表格标题
【发布时间】：2017-10-12 18:07:51
【问题描述】：

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

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

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


            });

【问题讨论】：

请阅读What should I do when someone answers my question?。即使您得到了有用的答案，您也从未接受任何问题的答案，这是一种不好的形式。您应该接受问题的答案，以便它们在网站上关闭，并且它会奖励回答者和您自己的代表点数。不接受答案的历史可能会让人们在一段时间后不再理会您的问题。

标签： javascript html css

【解决方案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>

【讨论】：

【解决方案2】：

一种可能的方法是将表格标题包装在<thead></thead> 中，将正文包装在<tbody></tbody> 中，然后将任何选择器应用为

$("#example tbody tr").click(function () {...});

【讨论】：

【解决方案3】：

您可以定位“td”标签：

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

如果您在表格中使用“th”标签：

<table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
   </table>

【讨论】：

【解决方案4】：

如果您不想使用th 或tbody 标签修改您的标题，您可以这样做。

$("table tr:gt(0)").click(function(){
    $(this).siblings().removeClass('selected-row');
    $(this).addClass('selected-row');
})

你可以在jsfiddle看到这个工作

【讨论】：

【解决方案5】：

使用th 作为标题行元素。

【讨论】：