Question

I have two tables on my page. The first one has three columns and the second one has two. The middle column on the first table is an image that when you click on it, it will move that row down to the second table. At the moment I have

$('table td img.add').live('click', (function() {
  $('table#tblName').append( $(this).closest('tr') );
}));

Which works. The row is removed from the first table and put at the bottom of the second. The only problem is that I want to only move the 1st and 3rd columns. I tried adding a middle column in the second table and then using jQuery to hide it when the page loaded, but as soon as I appended a row, that new row has three cells.

Answer 1

this should work.

$('table td img.add').live('click', (function() {
  var parent = $(this).closest('tr');
  // remove the middle td
  $(this).closest('td').remove();
  $('table#tblName').append( parent );
}));