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

Question

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?

score 21 · Accepted Answer · answered Sep 22 '11 at 15:42

21

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

} );

answered Sep 22 '11 at 15:42

maxedison

17,243
14
67
114

score 4 · Answer 2 · answered Sep 22 '11 at 15:42

4

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

answered Sep 22 '11 at 15:42

John Hartsock

85,422
23
131
146

@Samich ... The same thing I posted only your create new_row as a jQuery object whereas I left it as an HTML String. Essentially the same code. – John Hartsock Sep 22 '11 at 15:51
Yep. :) But you are typing faster than me. – Samich Sep 22 '11 at 15:55

score 1 · Answer 3 · answered Sep 22 '11 at 15:42

jQuery's 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
    });
} );

score 1 · Answer 4 · answered Sep 22 '11 at 15:43

1

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

answered Sep 22 '11 at 15:43

Korvin Szanto

4,531
4
19
49

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

4 Answers4

Linked