双击和更新表字段时添加 JS/添加文本框

JS/add textbox on doubleclick and update table field(s)

本文关键字：添加 JS 文本 更新 字段 双击      更新时间：2023-09-26

你好亲爱的程序员，

我正在尝试使用 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/

非常感谢和最诚挚的问候肋

这能解决你的案子吗？请检查这个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();
        }
    }
});

我刚刚做了一些非常相似的事情，并认为这是一种非常简洁的方法。 它假定您希望使用 Enter 键（键代码 13）将输入数据写回表单元格，并使用 Esc 键（代码 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>');
        }
    });
});
相关文章：