我有以下代码,我可以在其中编辑行中的上下文,每行包含一个保存按钮。当我编辑并保存上下文时它工作正常,但是当我尝试编辑并且不保存它并尝试编辑其他行时,我编辑的上下文将被保存而不单击保存按钮。如何恢复原始值?
$("#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;
})
答案 0 :(得分:0)
根据我对您的问题的理解 - 您需要保留行(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