Jquery: Mettre en surbrillance/Dégager la ligne du tableau sur le clic

Question

Je veux que mon script mette en surbrillance la ligne que je sélectionne et cela fonctionne bien, mais quand une ligne est sélectionnée/mise en surbrillance je veux qu'elle soit "désélectionnée/désactivée" ligne est sélectionnée. Comment puis-je faire cela?

Voici le code actuel pour sélectionner une ligne, il désélectionne, mais seulement si je clique sur la même ligne à nouveau:

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

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> 

Answer 1

Vous pouvez d'abord désélectionner lignes, comme

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

éditer: yep, sry, mais idée e avait raison;)

Answer 2

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

Answer 3

Cela affectera seulement la table en cours:

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

Answer 4

Meilleur utilisant .live. Un événement est préféré à plusieurs (pensez à la grande table, aux gros frais généraux).

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