Jquery：クリック時にテーブル行を強調表示/強調表示解除する

Question

スクリプトで選択した行を強調表示して効果的ですが、行が選択/強調表示されているときに別の行に「非選択/解除」したい行が選択されます。私はこれをどのようにして行うのですか？ここで

は、行を選択するための現在のコードで、それは選択解除が、私は再び同じ行をクリックした場合にのみ：

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

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

をあなたは最初にすべての選択を解除でき行のように

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

編集：yep、sry、but thベスト.liveを使用して

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

Answer 2

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

Answer 3

これは、現在のテーブルに影響します）と、eアイデアは正しかったです。 1つのイベントが多くのものより優先されます（大きなテーブル、大きなオーバーヘッドを考える）。

$("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 4

：