删除 JQuery 中的表行

Question

我在根据复选框从表中删除行时遇到问题。下面是我所做的屏幕截图。这是一张航空航班详细信息的表格。

最多可以添加 15 行。我想要做的是通过选择所有复选框并按删除行，授予用户删除特定航班或删除所有航班的权限。

以下是用于处理此问题的 jquery：

$("input[id$='_del_flight']").click(function() {

    var n = $("#" + this.id.slice(0,1) + "_airline_table tr").length;

    $("#" + this.id.slice(0,1) + "_airline_table tr").each(function(){

        if ( $("input[type=checkbox]",this).is(':checked') ) {
            if ( n > 2 ) {
                $(this).remove();
                n--;
                //alert("Value n-- is: " + n);
            } else {
                $(this).find("input").val('');
                $(this).find("input[type=checkbox]").removeAttr("checked");
                $(this).find('option:first').attr('selected', 'selected').parent('select');
            }
         }
    });
});

这个 jquery 很好地实现了我想要的功能。用户可以选择任何特定的航班详细信息并将其删除，或者用户可以将其全部删除。

但是，当用户决定将它们全部删除时，我的 jquery 将删除从第 2 行开始的行（上图所示的是 Flight 1）。我需要想出另一种方法，必须从最后一行删除该行，即 Flight 15，然后是 Flight 14，Flight 13 等等。我将通过将该行的所有输入值设为空来保留行号 2（由航班 1 使用）。

我确实尝试使用 jquery :gt 选择器，它不像我想要的那样工作。因此，如果有人可以帮助我删除最后一行中的行（删除全部）并保留用户可以根据用户选择删除特定航班的功能，我将非常感激。

非常感谢您的帮助。

Answer 1

尝试这样的事情：

$(":checked").each(function() {
    $(this).parent().remove()
});

你可能需要几个parent()。parent()取决于你的html的样子。

Answer 2

抱歉，我在处理您的代码时遇到问题，因此我将以不同的方式构建它。我会尽力对其进行适当的评论，以便它仍然有意义。

$("input[id$='_del_flight']").click(function() {
    // Get the table with the right ID
    var table = $('#' + this.id.slice(0,1) + '_airline_table');

    // Get all CHECKED checkboxes within the table
    table.find('input[type=checkbox]:checked').each(function () {

        // Get the row the checkbox belongs to
        var row = $(this).closest('tr');

        // Is this the first row?
        if (row.index() === 0) {
            // Your resetting code
            row.find("input").val('');
            row.find("input[type=checkbox]").removeAttr("checked");
            row.find('option:first').attr('selected', true);
        } else {
            // Remove the row
            row.remove();
        }

    });
});

Answer 3

我已经找到了解决方案。解决方案实际上并没有回答我的问题。该解决方案是一种解决此问题的方法。

我之所以问如何从最后一行删除表行，是为了保持 id 与数字 1 一致，依此类推。

因为，它只是一个ID，用于唯一标识该字段，因此该值可以进入数据库，我只使用任何数字，只要它是唯一的即可。我编写了 jQuery 脚本来查找现有的表行，并替换与该表行关联的输入之一中非数字的任何内容。

然后，我将检查另一个表行中的数字是否存在。如果存在，我只需将此数字加一。我使用 .each() 来执行此操作，一旦找不到现有数字就会停止。该数字将用于唯一标识该字段。