CODEWITHSUNDEEP
jqueryhtmlhtml-table
ahsteele
ahsteele

Reputation: 26494

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

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

Upvotes: 2

Views: 3195

Answers (3)

Corey Ballou
Corey Ballou

Reputation: 43487

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.

Upvotes: 4

PetersenDidIt
PetersenDidIt

Reputation: 25620

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

Upvotes: 2

John Boker
John Boker

Reputation: 83709

try

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

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

Upvotes: 1

Related Questions