Remove row from one table and add it to another with jQuery

Question

I am trying to remove a row from one table and add it to another with jQuery. I've examined this similar Stack Overflow post and feel like I am doing roughly the same thing but am obviously missing something as what I am doing is not working. I know I've got the right row as the remove is working but the row is not being added to the new table.

jQuery

var row = $($.fn.colorbox.element()).parents('tr');
row.fadeOut(1000, function() {
    $('#NewTableBody').append(row.remove());
});

Table Body

<tbody id="NewTableBody">

score 4 · Accepted Answer · answered Dec 03 '09 at 19:01

4

If you're only looking to remove and append a single row you can try the closest() traversal function:

var $row = $($.fn.colorbox.element()).closest('tr');
$row.fadeOut(1000, function() {
    $('#NewTableBody').append($row);
    $row.fadeIn(1000);
});

Also your row is hidden (because of the fade out). You need to show it again.

answered Dec 03 '09 at 19:01

Corey Ballou

42,389
8
62
75

Ah nice catch, didn't even think about it. – PetersenDidIt Dec 03 '09 at 22:50
How to add one column additionally in row – VPR Dec 10 '19 at 16:44

score 2 · Answer 2 · answered Dec 03 '09 at 18:54

2

Get rid of the remove() call, That is removing it from the DOM completely. append() will do the move for you.

var row = $($.fn.colorbox.element()).parents('tr');
row.fadeOut(1000, function() {
    $('#NewTableBody').append(row);
});

answered Dec 03 '09 at 18:54

PetersenDidIt

25,562
3
67
72

same answer at the (almost) same time. – John Boker Dec 03 '09 at 18:55
Unfortunately, this does not work. The fadeout still occurs but the row is not appended to the `NewTableBody`. – ahsteele Dec 03 '09 at 18:57
Without seeing a link to test it would be hard to tell you what is wrong – PetersenDidIt Dec 03 '09 at 19:01

score 1 · Answer 3 · answered Dec 03 '09 at 18:54

1

try

var row = $($.fn.colorbox.element()).parents('tr');

row.fadeOut(1000, function() {
    $('#NewTableBody').append(row);
});

answered Dec 03 '09 at 18:54

John Boker

82,559
17
97
130

Unfortunately, this does not work. The fadeout still occurs but the row is not appended to the `NewTableBody`. – ahsteele Dec 03 '09 at 18:58

Remove row from one table and add it to another with jQuery

3 Answers3

Linked