Question

我最初有一个表有两行。第一行的每个单元格都用单词FIRST标题，最后一行的每个单元格标有单词LAST。的 JS FIDDLE

我还有两个按钮，一个用于添加行，另一个用于删除行。

- 点击Add Row，它会在第二个最后位置添加一行，最多总共5行，然后禁用。

- 但是我无法弄清楚如何在点击Delete Row按钮的情况下从第二位逐行删除行，直到它的原始位置。基本上Delete Row按钮会相反添加行。最初禁用，但是当添加新行时，它将被启用。

我怎么能这样做？提前谢谢。

JS

// Add and remove row
var counter = 0;
$(".add-xy-scale-row").on("click", function () {

    counter = $('.xy-table tr').length - 1;

    var newRow = $("<tr>");
    var cols = "<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>";

    newRow.append(cols);
    if (counter == 3) $('.add-xy-scale-row').attr('disabled', true).prop('value', "You've reached the limit");
    $(".xy-table .last-row").before(newRow);
    $(".tooltip").hide();
    counter++;

    //Maintain vertical label height
    if ($('.xy-table').height() < 300) {
        $(".scale-label-input-group").addClass("small");
    } else if ($('.xy-table').height() > 300) {
        $(".scale-label-input-group").removeClass("small");
    }

});

$(".dlt-xy-scale-row").on("click", function () {
    $(".xy-table")
});

Answer 1

Here's a working jsfiddle

您可以使用jQuery的.prev()方法选择DOM中的上一个兄弟。在这种情况下，您定位最后一行.last-row，然后选择上一个兄弟，并使用.remove()将其删除。我还在counter为＆gt;时添加了禁用和启用删除按钮的功能。 0

修改

这是更新的JS：

// Add and remove row var counter = $('.xy-table tr').length - 1; $(".add-xy-scale-row").on("click", function () { var newRow = $("<tr>"); var cols = "<td> </td><td> </td><td> </td><td> </td><td> </td>"; newRow.append(cols); if (counter == 3) $('.add-xy-scale-row').attr('disabled', true).prop('value', "You've reached the limit"); $(".xy-table .last-row").before(newRow); $(".tooltip").hide(); //Maintain vertical label height if ($('.xy-table').height() < 300) { $(".scale-label-input-group").addClass("small"); } else if ($('.xy-table').height() > 300) { $(".scale-label-input-group").removeClass("small"); } counter = $('.xy-table tr').length - 1; if (counter > 1) { $('.dlt-xy-scale-row').attr('disabled', false); } else { $('.dlt-xy-scale-row').attr('disabled', true); } }); $(".dlt-xy-scale-row").on("click", function () { $(".xy-table .last-row").prev().remove(); counter = $('.xy-table tr').length - 1; if (counter > 1) { $('.dlt-xy-scale-row').attr('disabled', false); } else { $('.dlt-xy-scale-row').attr('disabled', true); } if (counter == 4) { $('.add-xy-scale-row').attr('disabled', true).prop('value', "You've reached the limit"); $(".tooltip").hide(); } else { $('.add-xy-scale-row').attr('disabled', false).prop('value', ""); $(".tooltip").show(); } });

Answer 2

$(".xy-table .last-row").prev().remove();

如果你不想删除它，你需要处理$(".xy-table .last-row").prev()是第一行的情况。

JSFiddle

Answer 3

这是我添加和删除行的方式。它将始终删除等于.deleteRow项的行。

这是使用您的代码进行100％工作迭代的fiddle。

$(document).on('click','#add-row',function(){
        var cells = [
                'CONTENT'
        ],
        cell,
        tbody   = document.getElementById('schedule-items'),
        row     = tbody.insertRow(-1); // -1 = lastRow

    for(var i = 0; i < cells.length; i++){
       cell = row.insertCell(i);
       cell.innerHTML = cells[i];
    }
});

$(document).on('click','.deleteRow',function(){
    var r = this.parentNode.parentNode.rowIndex;

    document.getElementById('schedule-items').deleteRow(r);
});

Answer 4

尝试：

$(".xy-table tr:nth-last-child(2)").remove()

Answer 5

使用以下代码更新：

$(document).ready(function () { 
    $('.dlt-xy-scale-row').attr('disabled', true); 
});

// ...

$(".add-xy-scale-row").on("click", function () {
   // ...
   $('.dlt-xy-scale-row').attr('disabled', false);
});

$(".dlt-xy-scale-row").on("click", function () {
    $('.add-xy-scale-row').attr('disabled', false);
    $(".xy-table .last-row").prev().not(":first-child").remove();
    if ($(".xy-table .last-row").prev(":first-child").length > 0) {
        $('.dlt-xy-scale-row').attr('disabled', true);
    }
});

它将保留第一行并重新启用按钮以添加新的表行。

看到它in action（从OP的小提琴中采用）

修改

禁用/启用删除按钮。

Answer 6

正如ImreNagy指出的那样，你必须使用

$(".xy-table .last-row").prev().remove();

删除第二行。

然后你应该添加一些IF来询问是否应该禁用该按钮

if(counter > 0){
    $(".dlt-xy-scale-row").removeAttr('disabled');
} else {
    $(".dlt-xy-scale-row").attr('disabled', 'disabled');
}

JSFiddle Example

从最后的第二个删除表行

6 个答案: