Jquery: Highlight/De-highlight table row on click

Question

Hey

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

Answer 1

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 ;)

Answer 2

$(".candidateNameTD").click(function() {
            $("tr").removeClass("diffColor");
            $(this).parents("tr").addClass("diffColor");
        });

Answer 3

This will only affect the current table:

$(".candidateNameTD").click(function() {
    $('table#newCandidatesTable tr').removeClass("diffColor");
    $(this).parents("tr").addClass("diffColor");
});

Answer 4

Best using .live. One event is preferred over x (think big table, big overhead).

$("div.candidateNameTD").live('click'. function() {
    var $tr = $(this).closest("tr");
    //remove any selected siblings 
    $tr.siblings().removeClass('diffColor');
    //toggle current row
    $tr.toggleClass('diffColor');         
});

Answer 5

when i try to use this code i get the following err. anybody can help?

i have 2 tables and the inner one only i need tr highlighting option. the row is highlighted right, but sametime the outer table body also gets highlighted. i couldnt change. any help?