Using jQuery, replace one row in the table with a new one

Question

Let's say I have a table:

<table id="mytable"> <tr class="old_row"><td>1</td><td>2</td><td class="edit">Edit</td></tr> <tr class="old_row"><td>1</td><td>2</td><td class="edit">Edit</td></tr> <tr class="old_row"><td>1</td><td>2</td><td class="edit">Edit</td></tr> </table> 

I want to click on the Edit cell and use jquery to replace the entire row with a new row with lots of content, e.g.

  $(document).ready(function() { $('#mytable .edit').click( function() { var tr = $(this).parent(); var new_row = '<tr class="new_row"><td>3</td><td>4</td><td>Save</td></tr>' // code to replace this row with the new_row }); } ); 

Any idea how this can be done?

Answer 1

 $(document).ready(function() { $('#mytable .edit').click( function() { var new_row = '<tr class="new_row"><td>3</td><td>4</td><td>Save</td></tr>' $(this).parent().replaceWith(new_row); }); } ); 

Answer 2

Use jQuery.replaceWith ()

 $(document).ready(function() { $('#mytable .edit').click( function() { var tr = $(this).parent(); var new_row = '<tr class="new_row"><td>3</td><td>4</td><td>Save</td></tr>'; tr.replaceWith(new_row); }); }); 

Answer 3

jQuery replaceWith() . Example:

 $(document).ready(function() { $('#mytable .edit').click( function() { var tr = $(this).parent(); var new_row = '<tr class="new_row"><td>3</td><td>4</td><td>Save</td></tr>' tr.replaceWith(new_row); // code to replace this row with the new_row }); } ); 

Answer 4

http://jsfiddle.net/hAvyv/

 $('.edit').click(function(){ $(this).parent().removeClass('old_row').addClass('new_row').html('<td>3</td><td>4</td><td>Save</td>'); });