Question

我正在尝试使用jQuery和CSS更改表格行的背景和文本颜色，以便一次只能选择一行。但是我似乎无法改变CSS，即使该类正在从jQuery函数中正确更改，因此jQuery似乎正在工作。

我很困惑为什么在更改类时CSS不会改变（我可以在chrome上的inspect元素视图中看到）。

请注意，表行是在Django模板页面中生成的，而div类是来自Bootstrap。

<div class="row panel panel-default">
  <table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Pass #</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Type</th>
            <th>Active</th>
        </tr>
    </thead>
    <tbody class="member">
        {% for member in filter_list %}
          {% with member.pass_set.all|first as pass %}
            <tr>
                <td>{{member.id}}</td>
                <td>{{pass.active_id}}</td>
                <td>{{member.last_name}}</td>
                <td>{{member.first_name}}</td>
                <td>{{pass.member_type}}</td>
                <td>{{pass.season.is_current|yesno|capfirst}}</td>
            </tr>
          {% endwith %}
        {% endfor %}
    </tbody>
  </table>
</div>

$("tr").click(function() {
    $(this).parent().children().removeClass(".selected");
    $(this).addClass(".selected");
});

.member tr:hover {
    background-color: rgba(41, 103, 182, 0.89);
    color: #FFF;
}
.selected tr{
    background-color: rgba(41, 103, 182, 0.89);
    color: #FFF;
}

我真的认为这会很直接，但我已经被困了一段时间。在此先感谢您的帮助！

感谢所有快速回复。我最终接受了三个人的建议！

最终解决方案：

.member tr.selected {
    background-color: rgba(41, 103, 182, 0.89);
    color: #FFF;
}

$("tbody tr").click(function() {
   $(this).addClass('selected').siblings().removeClass("selected");
});

Answer 1

您正在将selected类添加到tr元素，因此您的CSS选择器不正确。您也可以通过在.member前面添加前缀来使其更具体。试试这个：

.member tr.selected {
    background-color: rgba(41, 103, 182, 0.89);
    color: #FFF;
}

另外，您可能需要修改jQuery，以便只能选择tr中的tbody个元素 - 我怀疑您是否希望人们选择标题行：

$("tbody tr").click(function() {
    $(this).addClass('selected').siblings().removeClass("selected");
});

请注意，.或addClass()方法不需要removeClass()前缀。

Example fiddle

Answer 2

您不需要.或addClass方法中的removeClass。同样，您在tr类的CSS中不需要.selected，因为您要将其添加到tr元素...

http://jsfiddle.net/2E9T5/

Answer 3

http://jsfiddle.net/7FbmV/

No need for dot:

$("tr").click(function() {
  $(this).parent().children().removeClass("selected");
    $(this).addClass("selected");

});

Answer 4

你不使用.selected，只是选中，。是css中的类选择器，类似于＃是id选择器。

$("tr").click(function() {
    $(this).parent().children().removeClass("selected");
    $(this).addClass("selected");
});

更改表行OnClick的CSS

4 个答案: