1

你好亲爱的程序员，

我正在尝试使用 ajax 更新表字段。

双击表格单元格，单元格内容将替换为文本框，更改文本后，它会使用文本框值更新单元格值。

我的问题是，第一次更改工作正常，但在第二次更改之后，之前更改的所有表格单元格都使用新值更新，而不仅仅是单击的那个。

如果有人可以帮助我并指出正确的方向，那就太好了。

您可以在http://jsfiddle.net/bDxDX/3/上找到要测试的全部内容

$(function () {
    $(".doodleEdit").dblclick(function (e) {
        e.stopPropagation();
        var currentEle = $(this);
        var value = $(this).html();
        updateVal(currentEle, value);
    });
});

function updateVal(currentEle, value) {

    $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');

    var mode = $(currentEle).attr('class').split(' ')[1];

    if (mode == 'editDescr') {
        alert("editDescr");
    } else if (mode == 'addDate') {
        alert("addDate");
    } else if (mode == 'addVote') {
        alert("addVote");
    }

    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html($(".thVal").val().trim());
        }
    });

    $(document).click(function () {
            $(currentEle).html($(".thVal").val().trim());
    });
}

http://jsfiddle.net/bDxDX/3/

非常感谢和最好的问候沿海

4

2 回答 2

1

这能解决你的问题吗？请检查这个jsfiddle -

http://jsfiddle.net/hellomaya/bDxDX/5/

$(function () {
    $(".doodleEdit").dblclick(function (e) {
        e.stopPropagation();
        var currentEle = $(e.target);
        var value = $(e.target).html();

        console.log($(e.target));

        if ($.trim(value) === "") {
            $(currentEle).data('mode', 'add');
        } else {
            $(currentEle).data('mode', 'edit');
        }
        updateVal(currentEle, value);
    });
});

function updateVal(currentEle, value) {

    $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');

    var mode = $(currentEle).data('mode');
    alert(mode);

    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {
            $(this).parent().html($(this).val().trim());
            $(".thVal").remove();
        }
    });
}

$(document).click(function (e) {
    if ($(".thVal") !== undefined) {
        if ($(".thVal").val() !== undefined) {
            $(".thVal").parent().html($(".thVal").val().trim());
            $(".thVal").remove();
        }
    }
});
于 2013-09-16T09:22:18.747 回答
0

我只是做了一些非常相似的事情，并认为这是一种非常简洁的方法。它假定您要使用 Enter 键（键代码 13）将输入数据写回表格单元格，并使用 Escape（代码 27）关闭输入而不写入单元格。

$("#table").on('dblclick', 'td', function() {
    var cell_data = $(this).text();
    $(this).replaceWith('<td><input id="temp_enter"></input></td>');

    $("#temp_enter").keyup( function(event) {
        if (event.which == 13) {
            $(this).parent().replaceWith('<td>' + $(this).val() + '</td>');
        } else if (event.which == 27) {
            $(this).parent().replaceWith('<td>' + cell_data + '</td>');
        }
    });
});
于 2016-06-29T23:20:17.270 回答