jQuery 更改表格行 OnClick 的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24336609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the CSS of Table Row OnClick
提问by Taaam
I'm Trying to change the background and text color of a table row on click using jQuery and CSS so that only one row may be selected at a time. However I cannot seem to get the CSS to change, even though the class is changing correctly from the jQuery function, so the jQuery appears to be working.
我正在尝试使用 jQuery 和 CSS 在单击时更改表格行的背景和文本颜色，以便一次只能选择一行。但是，我似乎无法更改 CSS，即使该类从 jQuery 函数正确更改，因此 jQuery 似乎正在运行。
I am very confused why the CSS doesn't change when the class is changed (which I can see happening on the inspect element view on chrome).
我很困惑为什么当类改变时 CSS 没有改变（我可以在 chrome 的检查元素视图上看到这种情况）。
Note that the table rows are being generated within a Django template page and the div classes are from Bootstrap.
请注意，表格行是在 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;
}
I really thought this would be straight forward, but I have been stuck for a while. Thanks in advance for any help!
我真的以为这会很简单，但我已经被困了一段时间。在此先感谢您的帮助！
Thanks for all the quick responses. I ended up taking advice from all three!
感谢所有快速回复。我最终接受了这三个人的建议！
Final solution:
最终解决方案：
.member tr.selected {
background-color: rgba(41, 103, 182, 0.89);
color: #FFF;
}
$("tbody tr").click(function() {
$(this).addClass('selected').siblings().removeClass("selected");
});
回答by Rory McCrossan
You are adding the selectedclass to the trelement, so your CSS selector is incorrect. You may also want to make it more specific by prefixing it with .membertoo. Try this:
您正在向元素添加selected类tr，因此您的 CSS 选择器不正确。您可能还希望通过添加前缀来使其更具体.member。尝试这个：
.member tr.selected {
background-color: rgba(41, 103, 182, 0.89);
color: #FFF;
}
Also, you may want to amend your jQuery so that only trelements within the tbodycan be selected - I doubt you want people to select the heading row:
此外，您可能想要修改您的 jQuery，以便只能选择 jQuery 中的tr元素tbody- 我怀疑您是否希望人们选择标题行：
$("tbody tr").click(function() {
$(this).addClass('selected').siblings().removeClass("selected");
});
Note that there is no .prefix required for the addClass()or removeClass()methods.
请注意，or方法不需要.前缀。addClass()removeClass()
回答by A.O.
You don't need the .in the addClassor removeClassmethods. Likewise you don't need the trin your CSS for the .selectedclass since you are adding it to a trelement...
您不需要.inaddClass或removeClass方法。同样，您不需要tr在.selected类的 CSS 中使用 ，因为您将它添加到tr元素中...
回答by sinisake
No need for dot:
$("tr").click(function() {
$(this).parent().children().removeClass("selected");
$(this).addClass("selected");
});
回答by swestfall
You don't use .selected, just selected, . is the class selector in css, similar to how # is the id selector.
你不使用 .selected，只是选择，。是css中的类选择器，类似于#是id选择器。
$("tr").click(function() {
$(this).parent().children().removeClass("selected");
$(this).addClass("selected");
});
