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时，前一行保留了添加到其中的类。我怎样才能这样做，以便在任何一张桌子上，一次只有一个桌子可以有这个课程。

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

谢谢，标记

Answer 1

Closest获取选择器的父级，这已经是表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");
});

如何在表tr上切换类

2 个答案: