从最后的第二个删除表行

I have a table initially with two rows.Every cells of first row titled with word FIRST and every cell of last row titled with word LAST. JS FIDDLE

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

I also have two button one button for adding rows and another for deleting rows.

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

-On clicking Add Row it adds a Row in the 2nd last position upto total 5 rows and become disable.

- 单击“添加行”,它会在第二个最后位置添加一行,最多总共5行,并变为禁用。

-But I couldn't figure out how to remove rows one by one from 2nd last upto it's original position on clicking Delete Row button.Basically Delete Row button will do opposite of Add row. Initially Disabled but when there is new row added it will be enabled.

- 但是我无法弄清楚如何从第二个上一个一个地删除行,直到它在单击“删除行”按钮时的原始位置。基本上“删除行”按钮将与“添加行”相反。最初已禁用,但是当添加新行时,将启用它。

How I can do this ? Thanks in advance.

我怎么能这样做?提前致谢。

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")
});

6 个解决方案

#1

Here's a working jsfiddle

这是一个有效的jsfiddle

You can use jQuery's .prev() method to select the previous sibling in the DOM. In this case, you target the last row, .last-row, then select the previous sibling and remove it with .remove(). I also added in disabling and enabling the Delete button when counter is > 0.

您可以使用jQuery的.prev()方法来选择DOM中的先前兄弟。在这种情况下,您将目标指向最后一行,.last-row,然后选择上一个兄弟,并使用.remove()将其删除。当计数器> 0时,我还添加了禁用和启用“删除”按钮。

Edit

Here is the updated JS:

这是更新的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>&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();

    //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();
    }
});

#2

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

Of yourse you need to handle the situation that $(".xy-table .last-row").prev() is the first row if you don't want to delete that.

你需要处理$(“。xy-table .last-row”)。prev()是第一行,如果你不想删除它。

JSFiddle

#3

Try:

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

#4

As ImreNagy pointed out, you have to use

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

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

to remove the second last row.

删除第二行。

Then you should add some IFs to ask if the button should be disabled or not like that

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

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

JSFiddle Example

#5

This is how I add and remove rows. It will always remove the row that is equal to the .deleteRow item.

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

Here is a fiddle of 100% working iteration with your code.

这是一个使用您的代码进行100%工作迭代的小提琴。

$(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);
});

#6

Use these code updates:

使用这些代码更新:

$(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);
    }
});

It will preserve the first row and re-enable the button to add new table rows.

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

See it in action (adopted from the OP's fiddle)

看到它的实际效果(从OP的小提琴中采用)

Edit

Disabling/enabling the deletion button corrctly handled.

正确处理禁用/启用删除按钮。