Question

我正在尝试创建一个系统，让用户自己选择一个表行，然后按删除按钮将其删除。

所以我做了这个：

$("#container tbody tr").click(function () {
    $(this).addClass("selectedRow");
});

function delete() {
    var check = confirm("Are you sure you want to delete this?");
    if (check) {
         $(".selectedRow").remove();
    }
}

$("#delete-btn").click(delete);

对于CSS：

#container tbody tr.selectedRow {
   background-color: red; 
}

所以我试图实现，当我点击table row里面的tbody它给它selectedRow类时，但它删除了任何其他元素的类那个容器。

我如何制作它以便我只能选择一个tr（表格行）？

我自己尝试：

$("#container tbody tr").click(function () {
    $(this).addClass("selectedRow");
    $(this).parent().removeClass("selectedRow");
});

但那不起作用

Answer 1

这样做

$("#container tbody tr").click(function () {
    $(".selectedRow").removeClass("selectedRow");
    $(this).addClass("selectedRow");

});

第一行将从所有元素中删除selectedRow的类名。然后，您可以将该类添加到单击元素。

Answer 2

您可以使用：

$("#container tbody tr").click(function () {

    // Remove selectedRow class from any rows having it in this table
    $('.selectedRow', $(this).parent()).removeClass("selectedRow");

    // Add it to the clicked row
    $(this).addClass("selectedRow");

});

Answer 3

你的意思是这样吗？

$("#container tbody tr").click(function () {
    $(this).parent().find(".selectedRow").removeClass("selectedRow");
    $(this).addClass("selectedRow");
});

Answer 4

编辑您的管理功能：

$("#container tbody tr").click(function () {
    $(this).parent().find(".selectedRow").removeClass("selectedRow");
    $(this).addClass("selectedRow");
});

Answer 5

$("#container tbody tr").click(function () {
    $(this).addClass("selectedRow").siblings().removeClass("selectedRow");

});

Answer 6

$("#container tbody tr").click(function () {

 // Remove selectedRow class from any rows having it in this table
 $(".selectedRow").removeClass("selectedRow");

 // Add it to the clicked row
 $(this).addClass("selectedRow");

});

jQuery添加类并删除它没有它的所有元素

6 个答案: