Jquery: Đánh dấu/bỏ chọn hàng của bảng khi nhấp vào

Question

Tôi muốn tập lệnh của tôi đánh dấu hàng mà tôi chọn và nó hoạt động tốt, nhưng khi một hàng được chọn/tô sáng, tôi muốn nó được "bỏ chọn/tắt sáng" nếu khác hàng được chọn. Làm thế nào để tôi làm điều này?

Đây là mã hiện tại để chọn một hàng, nó Bỏ chọn, nhưng chỉ khi tôi bấm vào cùng hàng một lần nữa:

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

bảng 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

Trước tiên, bạn có thể bỏ chọn tất cả hàng, như

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

chỉnh sửa: yep, sry, but th e ý tưởng đã đúng;)

Answer 2

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

Answer 3

này sẽ chỉ ảnh hưởng đến bảng hiện tại:

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

Answer 4

nhất sử dụng .live. Một sự kiện được ưa thích hơn nhiều (nghĩ bảng lớn, chi phí lớn).

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