Jquery 将编辑的数据保存在html行中

我有以下代码，在其中我可以编辑行中的上下文，并且每行包含一个保存按钮。当我编辑并保存上下文时，它工作正常，但当我尝试编辑而不保存它并尝试编辑其他行时，我编辑的上下文将在不单击“保存”按钮的情况下保存。如何恢复到原始值

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

$（“#tableid”）。在（“单击”，“tr”，函数（）
{
$（this.find（“.btnsave”）.attr（“disabled”，false）；
$（“.btnsave”）。单击（函数（）{
$（“#tableidtd”）。每个（函数（）
{
if（$（this.hasClass（“editclass”））
{
$（this.parents（'tr'）.css（“背景色”、“白色”）；
$（this.html（$（this.find（'input'）.val（））；
$（this.removeClass（“editclass”）；
$（“.btnsave”）.attr（“已禁用”，true）；
}
});
});
$（“#tableid td”）。每个（函数（）{
if（$（this.hasClass（“editclass”））{
$（this.parents（'tr'）.css（“背景色”、“白色”）；
$（this.html（$（this.find（'input'）.val（））；
$（this.removeClass（“editclass”）；
}
});
$（this）.find（'td:not（：first child，：last child）'）。每个（函数（）
{
var oldcontent=$（this.text（）；
如果（oldcontent！=“”）
{
$（this）.parents（'tr'）.css（'background-color'，'red'）；
$（此）.addClass（“editclass”）；
$（this.html（“”）；
$（this.children（）.first（）.focus（）；
$（this）.children（）.first（）.keypress（函数（e）
{
如果（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（函数（）{
$（this）.parent（）.text（oldcontent）；
$（this.removeClass（“editclass”）；
});
返回false；
})

根据我从您的问题中了解到的情况-您需要保留行（

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

    });
});

arrbackupdatea=[]；
$（“#tableid”）。在（“单击”，“td”，函数（）{
if（$（this）.find（'.btnsave'）.length>0）{
回来
}
var tRow=$（this）.closest（'tr'）；
$（tRow）.find（“.btnsave”）.attr（“disabled”，false）；
$（“#tableid td.editclass”）。每个（函数（）{
$（this.parents（'tr'）.css（“背景色”、“白色”）；
如果（arrbackupdatea.length>0）{
$（this.html（arrbackupdatea.shift（））；
}否则{
$（this.html（$（this.find）（“input”）.val（））；
}
$（this.removeClass（“editclass”）；
});
arrbackupdatea=[]；
$（tRow）.find（'td:not（：first child，：last child）'）。每个（函数（）{
var oldcontent=$（this.text（）；
如果（oldcontent！=“”）{
arrbackupdatea.push（oldcontent）；
$（this）.parents（'tr'）.css（'background-color'，'red'）；
$（此）.addClass（“editclass”）；
$（this.html（“”）；
$（this.children（）.first（）.focus（）；
$（this）.children（）.first（）.keypress（函数（e）{
如果（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（函数（）{
$（this）.parent（）.text（oldcontent）；
$（this.removeClass（“editclass”）；
});
返回false；
});
$（“.btnsave”）。单击（函数（）{
$（“#tableid td.editclass”）。每个（函数（）{
$（this.parents（'tr'）.css（“背景色”、“白色”）；
$（this.html（$（this.find（'input'）.val（））；
$（this.removeClass（“editclass”）；
$（“.btnsave”）.attr（“已禁用”，true）；
});
});

---

查看更新的JSFIDLE

你能提供一个@Taleeb吗？这是我的小提琴，但它没有工作。也许你会有主意。我的问题是，如果我编辑值并单击“保存”按钮，它应该被保存。如果我编辑第一个td并转到另一行，第一个编辑的行应该返回旧的value@learner. 我已经更新了答案。见更新的JSFIDLE谢谢。事实上上上一个也在工作。+1为你。谢谢人：）@Taleeb