Question

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

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

Answer 2

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

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

Answer 3

使用th作为标题行元素。

Answer 4

您可以定位“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>

Answer 5

如果您不想使用th或tbody标记修改标题，则可以执行以下操作。

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

您可以在此jsfiddle

中看到这一点

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

5 个答案: