CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vishal Freelancer
Vishal Freelancer

Reputation: 95

Dynamically add & remove rows

I have 2 different table in same page. 2 table having functionality that dynamically add & remove rows.

When i remove dynamically added row from 2nd table it affects table 1.

sr. no column in 2nd table, when i remove row from 2nd table it shows the sr. nos in 1st table. But there is no sr no column in table first.

$(document).on('click', '.del', function() {
    var index = $(this).closest('tr').index();
    $(this).parent().parent().remove();
    for(var i=index; i<$('table tbody tr').children().length; i++){

        $('table tbody tr:nth-child(' + i + ') td:first-child').text(i);
    }
    // more code in fiddle
 });

see this fiddle

Upvotes: 2

Views: 124

Answers (1)

amit wadhwani
amit wadhwani

Reputation: 1140

Use below code

$('#potable tbody tr:nth-child(' + i + ') td:first-child').text(i); //change

Instead of below 

$('table tbody tr:nth-child(' + i + ') td:first-child').text(i);

Reason why your code was not working is because you are relying on selector 'table' and for both the table it is true and you are checking first child so its affecting first child i.e child of first table, If you rely on specific ID '#potable' it will affect only second table nth-child(x) will bring xth child of second table.

Upvotes: 3

Related Questions