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

时间:2015-11-08 12:23:57

标签: jquery

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

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

1 个答案:

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