Poku Poku - 10 months ago 80
jQuery Question

Jquery: Highlight/De-highlight table row on click

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?

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

<table id="newCandidatesTable">
<th style="cursor: pointer;">ID</th>
<th style="cursor: pointer;">Navn</th>
<th style="cursor: pointer;">Email</th>
<% 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>
<div id="<%= "acceptCandidateButton_" + candidate.AnsogerID %>" class="acceptb" style="cursor: pointer; border: 1px solid black; width: 150px; text-align: center;">Godkend</div>
} %>

Answer Source

You could first deselect all rows, like

    $(".candidateNameTD").click(function() {
        $(this).parents("tr").toggleClass("diffColor", this.clicked);

edit: yep, sry, but the idea was right ;)