Jquery：单击时突出显示/取消突出显示表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1287699/
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
Jquery: Highlight/De-highlight table row on click
提问by Poku
I want my script to highlight the row that I select and it works great, but when a row is selected/highlighted i want it to be "deselected/dehighlighted" if another row is selected. How do i do this?
I want my script to highlight the row that I select and it works great, but when a row is selected/highlighted i want it to be "deselected/dehighlighted" if another row is selected. 我该怎么做呢？
Here is current code for selecting a row, it deselects, but only if i click on the same row again:
这是用于选择一行的当前代码，它会取消选择，但前提是我再次单击同一行：
$(".candidateNameTD").click(function() {
$(this).parents("tr").toggleClass("diffColor", this.clicked);
});
Html table
html表
<table id="newCandidatesTable">
<thead>
<tr>
<th style="cursor: pointer;">ID</th>
<th style="cursor: pointer;">Navn</th>
<th style="cursor: pointer;">Email</th>
<th></th>
</tr>
</thead>
<tbody>
<% foreach (var candidate in Model.Ansogninger)
{
%>
<tr id="<%= candidate.AnsogerID %>" class="newCandidatesTableTr">
<td><div id="candidateID"><%= candidate.AnsogerID %></div></td>
<td><div id="<%= "candidateName_" + candidate.AnsogerID %>" class="candidateNameTD"><%= candidate.Navn %></div></td>
<td><div id="candidateEmail"><%= candidate.Email %></div></td>
<td>
<div id="<%= "acceptCandidateButton_" + candidate.AnsogerID %>" class="acceptb" style="cursor: pointer; border: 1px solid black; width: 150px; text-align: center;">Godkend</div>
</td>
</tr>
<%
} %>
</tbody>
</table>
回答by fresskoma
You could first deselect all rows, like
您可以先取消选择所有行，例如
$(".candidateNameTD").click(function() {
$(this).closest("tr").siblings().removeClass("diffColor");
$(this).parents("tr").toggleClass("diffColor", this.clicked);
});
edit: yep, sry, but the idea was right ;)
编辑：是的，对不起，但这个想法是对的；)
回答by Daniel Moura
$(".candidateNameTD").click(function() {
$("tr").removeClass("diffColor");
$(this).parents("tr").addClass("diffColor");
});
回答by karim79
This will only affect the current table:
这只会影响当前表：
$(".candidateNameTD").click(function() {
$('table#newCandidatesTable tr').removeClass("diffColor");
$(this).parents("tr").addClass("diffColor");
});
回答by redsquare
Best using .live. One event is preferred over many (think big table, big overhead).
最好使用.live. 一个事件优于多个事件（想想大桌子，大开销）。
$("div.candidateNameTD").live('click'. function() {
var $tr = $(this).closest("tr");
//remove any selected siblings
$tr.siblings().removeClass('diffColor');
//toggle current row
$tr.toggleClass('diffColor');
});
