使用 Jquery，将表中的一行替换为新行答案

【问题标题】：Using Jquery, replace one row in table with a new one使用 Jquery，将表中的一行替换为新行
【发布时间】：2011-11-22 23:15:55
【问题描述】：

假设我有一张桌子：

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

我想点击<td>Edit</td>单元格并使用jquery将整行替换为具有更多内容的新行，例如

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

    } );

知道如何做到这一点吗？

【问题讨论】：

标签： jquery html-table

【解决方案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);
    });

} );

【讨论】：

【解决方案2】：

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

【讨论】：

@Samich ...同样的事情我只发布了你的 create new_row 作为一个 jQuery 对象，而我把它作为一个 HTML 字符串。基本相同的代码。
是的。 :) 但是你打字比我快。

【解决方案3】：

jQuery 的@987654321@。示例：

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

【讨论】：

【解决方案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>');
});

【讨论】：