如何在表格 tr 上切换类

How to toggle class on table tr's

本文关键字：tr 表格      更新时间：2023-09-26

我在一个页面上有多个表。对于每个表，我希望能够在单击 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 个表行具有此类。

同样不是，页面上有时有多个表，

因此解决方案只需要与正在单击的表相关，而不是页面上的所有表。

谢谢马克

最接近的获取选择器的父级，这已经是表 tr，试试这个： 

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

无需向每个表行添加 onclick 处理程序。利用事件冒泡来发挥您的优势。使用同级姐妹获取具有类的类（如果存在）。

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