將編輯後的數據保存在html行中

Question

我有以下代碼，我可以在行中編輯上下文，並且每行都包含一個保存按鈕。當我編輯並保存上下文時，它工作正常，但是當我嘗試編輯並不保存它並嘗試編輯其他行時，我編輯的上下文無需單擊保存按鈕即可保存。我該如何恢復原始值？

$("#tableid").on("click", "tr", function() 
{ 
    $(this).find(".btnsave").attr("disabled", false); 
    $(".btnsave").click(function() { 
     $("#tableidtd").each(function() 
     { 
      if ($(this).hasClass("editclass")) 
      { 
       $(this).parents('tr').css("background-color", "white"); 
       $(this).html($(this).find('input').val()); 
       $(this).removeClass("editclass"); 
       $(".btnsave").attr("disabled", true); 
      } 
     }); 
    }); 
    $("#tableid td").each(function() { 
     if ($(this).hasClass("editclass")) { 
      $(this).parents('tr').css("background-color", "white"); 
      $(this).html($(this).find('input').val()); 
      $(this).removeClass("editclass"); 
     } 
    }); 
    $(this).find('td:not(:first-child, :last-child)').each(function() 
    { 
     var oldcontent= $(this).text(); 
     if (oldcontent!= " ") 
     { 
      $(this).parents('tr').css('background-color', 'red'); 
      $(this).addClass("editclass"); 
      $(this).html("<input type='text' value='" + oldcontent+ "'/>"); 
      $(this).children().first().focus(); 
      $(this).children().first().keypress(function (e) 
      { 
       if (e.which == 13) 
       { 
        $(this).parents('tr').css('background-color', 'white'); 
        var newtext= $(this).val(); 
        $(this).parent().text(newtext); 
        $(this).removeClass("editclass"); 
       } 
      }); 
     } 
    }); 
    $(this).children().first().blur(function() { 
     $(this).parent().text(oldcontent); 
     $(this).removeClass("editclass"); 
    }); 
    return false; 
}) 

Answer 1

從我從你的問題理解 - 你需要保持它可以用來在有需要時恢復值的行的（tr）數據的備份。在下面的例子中，我使用的陣列來存儲備份

arrBackupData = []; 
$("#tableid").on("click", "td", function() { 
    if ($(this).find('.btnsave').length > 0) { 
     return; 
    } 
    var tRow = $(this).closest('tr'); 
    $(tRow).find(".btnsave").attr("disabled", false); 

    $("#tableid td.editclass").each(function() { 
     $(this).parents('tr').css("background-color", "white"); 
     if (arrBackupData.length > 0) { 
      $(this).html(arrBackupData.shift()); 
     } else { 
      $(this).html($(this).find("input").val()); 
     } 
     $(this).removeClass("editclass"); 
    }); 
    arrBackupData = []; 

    $(tRow).find('td:not(:first-child, :last-child)').each(function() { 
     var oldcontent = $(this).text(); 
     if (oldcontent != " ") { 
      arrBackupData.push(oldcontent); 
      $(this).parents('tr').css('background-color', 'red'); 
      $(this).addClass("editclass"); 
      $(this).html("<input type='text' value='" + oldcontent + "'/>"); 
      $(this).children().first().focus(); 

      $(this).children().first().keypress(function (e) { 
       if (e.which == 13) { 
        $(this).parents('tr').css('background-color', 'white'); 
        var newtext = $(this).val(); 
        $(this).parent().text(newtext); 
        $(this).removeClass("editclass"); 
       } 
      }); 
     } 
    }); 
    $(tRow).children().first().blur(function() { 
     $(this).parent().text(oldcontent); 
     $(this).removeClass("editclass"); 
    }); 
    return false; 
}); 

$(".btnsave").click(function() { 

    $("#tableid td.editclass").each(function() { 

     $(this).parents('tr').css("background-color", "white"); 
     $(this).html($(this).find('input').val()); 
     $(this).removeClass("editclass"); 
     $(".btnsave").attr("disabled", true); 

    }); 
}); 

查看更新後的jsfiddle here