Delete Table row from the 2nd last

Refresh

November 2018

Views

353 time

2

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

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.

-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 answers

1

Это, как я добавлять и удалять строки. Он всегда будет удалить строку, которая равна .deleteRowп.

Вот скрипка из 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);
});
1

Пытаться:

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

1

Используйте эти обновления кода:

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

Это позволит сохранить первую строку и повторно включить кнопку, чтобы добавить новые строки таблицы.

Посмотрите в действии (заимствовано из скрипки операционной в)

редактировать

Отключение / включение кнопки удаления corrctly обрабатывается.

1

Как ImreNagy отметили, вы должны использовать

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

для удаления второго последнего ряда.

Затем вы должны добавить некоторые МСФ, чтобы спросить, если кнопка должна быть отключена или не нравится

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

Пример JSFiddle

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

Из yourse вам нужно справиться с ситуацией , которая $(".xy-table .last-row").prev()является первой строкой , если вы не хотите , чтобы удалить это.

JSFiddle

1

Вот рабочий jsfiddle

Вы можете использовать JQuery в .prev()метод , чтобы выбрать предыдущий родственный в DOM. В этом случае, вы нацелены на последнюю строку, .last-rowи выберите предыдущий родственный и удалить его с .remove(). Я также добавил отключение и включение кнопки Delete при counter> 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>&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();
    }
});