javascript - 如何在表 tr 上切换类

Question

我在一个页面上有多个表格。对于每个表，我希望能够在单击 tr 时切换一个类。

到目前为止，这就是我为 js 所拥有的：

 $(document).ajaxSuccess(function () {
 $("table tr").click(function () {

     if ($(this).closest("table tr").hasClass("selected_row"))
     { $(this).closest("table tr").removeClass("selected_row"); }

     else { $(this).closest("table tr").addClass("selected_row"); }
 });
});

现在我遇到的问题是，当我单击此表中的第二个 tr 时，前一行保留了添加到其中的类。我怎样才能做到这一点，以便在任何桌子上，一次只能有 1 个 tablerow 有这个类。

也不是，有时页面上有多个表格，因此解决方案只需要与被点击的表格相关，而不是页面上的所有表格。

谢谢，马克

Answer 1

Closest 获取选择器的父级，这已经是 table tr，试试这个：

   if ($(this).hasClass("selected_row")) {
       $(this).removeClass("selected_row");
   } else {
       $(this).addClass("selected_row");
       $(this).siblings().removeClass('selected_row');
   }

Answer 2

无需为每个表行添加 onclick 处理程序。使用事件冒泡对您有利。使用兄弟姐妹来获取具有该类（如果存在）的那个。

$("table tbody").on("click", "tr", function() {
    var row = $(this);
    row.toggleClass("selected_row");
    row.siblings("selected_row").removeClass("selected_row");
});