内联编辑，删除输入

Question

我有以下代码可以对表行进行内联编辑：

$('.edit_td').click(function() {
    var td_value = $(this).text();  
    $(this).html('<input type="text" value="' + $(this).html() + '">');
});

这很好，但是当我切换到另一行时，我希望第一行从输入字段转换回原始的td。当然，我点击的行应该转换为输入字段，其中包含td-text。

我已经尝试了.blur()，但是当我使用它时，td没有转换为输入字段。

Answer 1

您需要在正在编辑的单元格上放置一个类，然后您可以在下次单击edit时检索该类，并再次设置文本值。像这样的东西：

$('.edit_td').click(function() {
    resetEditedCells(); 
    $(this).addClass('active').html('<input type="text" value="' + $(this).html() + '">');
});

function resetEditedCells() {
    $('.edit_td.active').removeClass('active').html(function() {
        return $(this).find('input').val();
    });
}

Answer 2

检查这个Demo fiddle

$('.edit_td').click(function() {
    var td_value = $(this).text(); 
    var parent = $(this).parent();
    $(this).remove();
    parent.html('<input type="text" value="' + $(this).html() + '">');

    $('input').on('focusout blur',function(){

        $(this).parent().append('<td>'+$(this).val()+'</td>');
        $(this).remove();
    });
})