Using Jquery, replace one row in table with a new one

html-table, jquery

Solution

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

} );

Problem

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 `<td>Edit</td>` cell and use jquery to replace the entire row with a new row with more 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 could be done?

Original source