Jquery-直接编辑表行

我是Jquery的新手，所以请不要对我太苛刻。我尝试做的是直接从表格单元格编辑行数据。这是一个工作过程，我被困在其中，需要帮助

假设我有一个tableID“tabledata”，我想点击一个单元格（列/行），该单元格的值将变为一个文本框（可编辑）。用户编辑值后，将使用Ajax保存。如果用户决定在编辑模式下不更改值，用户可以单击屏幕上的某个位置中止，单元格值将返回原始值（不再有文本框）

我仍在处理一些片段，但我现在面临的问题是，当用户单击单元格时，它会变为可编辑模式（textbox），然后用户单击文本框进行编辑，文本框会消失，因为“鼠标悬停功能”会返回原始值

我怎样才能防止这种情况？如果能用更好的方法来做这件事，我们将不胜感激

以下是我的Jquery代码：

$(function() {

    var array = []
    array[0] = '';  // Current Row
    array[1] = '';  // Current Col

    var oldValue
    var updateID; // Updating ID

     $("#tabledata td").click(function(e) {   
        // I NEED TO FIND THE CLOSEST TD 
        var column_num = parseInt( $(this).index() ) ;
        var row_num = parseInt( $(this).parent().index() ); 
        //alert("updateID: " + updateID + " |\n Row_num = " + row_num + "  |\n Column_num = " + column_num + ' |\n NewValue: ' + oldValue);         

        oldValue = ($(this).html());
        updateID = $("#tabledata tr:eq(" + row_num + ") td:eq(0)").text();

        $("#tabledata tr:eq(" + row_num + ") td:eq(" + column_num + ")").html("<input type='text' name='cstage' value='Test123'>");
        array[0] = row_num;
        array[1] = column_num;
        //getCellPosition()

        e.preventDefault(); // <-- consume event
        e.stopImmediatePropagation();
        return false;

    });

    putOldValueBack = function()
    {
        //alert("Change back value for " + array[1] + ' - ' + array[2] + " - " + oldValue); 
        $("#tabledata tr:eq(" + array[0] + ") td:eq(" + array[1] + ")").html(oldValue); 
    }

});


$(document).click(function (e)
{
    putOldValueBack()

});

$（函数（）{
变量数组=[]
数组[0]=“”；//当前行
数组[1]=''；//当前列
风险值
var updateID；//正在更新ID
$（“#tabledata td”）。单击（函数（e）{
//我需要找到最近的TD
var column_num=parseInt（$（this.index（））；
var row_num=parseInt（$（this.parent（）.index（））；
//警报（“updateID:+updateID+”\n Row_num=“+Row_num+”\n Column_num=“+Column_num+”\n NewValue:“+oldValue”）；
oldValue=（$（this.html（））；
updateID=$（“#tabledata tr:eq（“+row#num+”）td:eq（0）”）.text（）；
$（“#tabledata tr:eq（“+行数+”）td:eq（“+列数+”））.html（“”）；
数组[0]=行数；
数组[1]=列数；
//getCellPosition（）
e、 preventDefault（）；//我怀疑这可以解决问题，但不能确定。您必须使用该事件（最好不要使用mouseup，只需单击-它应该可以正常工作）

请注意，我删除了未更改的代码位

$("#tabledata td").click(function(e) { // <-- event as argument

    // some stuff

    e.preventDefault(); // <-- consume event
    e.stopImmediatePropagation();
    return false;
});

$(document).click(function (e) { // <-- now using click
    putOldValueBack()
});

$（“#tabledata td”）。单击（函数（e）{/我怀疑这可以解决问题，但不能确定。您必须使用事件（最好不要使用mouseup，只需单击即可-它应该可以正常工作

请注意，我删除了未更改的代码位

$("#tabledata td").click(function(e) { // <-- event as argument

    // some stuff

    e.preventDefault(); // <-- consume event
    e.stopImmediatePropagation();
    return false;
});

$(document).click(function (e) { // <-- now using click
    putOldValueBack()
});

$（“#tabledata td”）。单击（函数（e）{//如果你把它放在JSFIDLE中，调试会更容易如果你把它放在JSFIDLE中，调试会更容易hi@MightyPort，谢谢你的帮助。我尝试了你的建议，但效果不太好。我编辑了这篇文章，把你的例子和HTML代码放在一起，请看看你是否能帮上忙。现在看看答案。这是一个有效的考试ple，你可以调整它来做你想做的。我只做了一个简单的单元格编辑器。哇，谢谢。还有一件事，当用户点击一个不同的单元格（不同的行）时，单元格能回到原始值吗？现在，它让它们处于可编辑模式，直到我点击表外。再次感谢@MightyPort。是的，就像我在存储“真”或“假”一样“false”使用
.data（）
，您可以存储旧值。对不起，我如何确定用户是否单击了另一个单元格“td”，以便将原始单元格重置为原始值（无文本框）？嗨@MightyPort，谢谢你的帮助。我尝试了你的建议，但效果不太好。我编辑了这篇文章，将你的例子与HTML代码结合起来，请看看你是否能帮上忙。现在看看答案。这是一个有效的例子，你可以调整它来做你想做的。我只是做了一个简单的单元格编辑器。哇，谢谢。一个上午例如，当用户单击不同的单元格（不同的行）时，单元格能否返回到原始值？现在，它使单元格处于可编辑模式，直到我在表外单击为止。再次感谢@MightyPort.Yes，就像我使用
.data（）存储“true”或“false”一样
，您可以存储旧值。对不起，我如何确定用户是否单击了另一个单元格“td”，以便将原始单元格重置为原始值（无文本框）？
$(function () {
    $("#tabledata td").click(function (e) {
        e.preventDefault(); // <-- consume event
        e.stopImmediatePropagation();

        $this = $(this);

        if ($this.data('editing')) return;  

        var val = $this.text();

        $this.empty()
        $this.data('editing', true);        

        $('<input type="text" class="editfield">').val(val).appendTo($this);
    });

    putOldValueBack = function () {
        $("#tabledata .editfield").each(function(){
            $this = $(this);
            var val = $this.val();
            var $td = $this.closest('td');
            $td.empty().html(val);
            $td.data('editing', false);

        });
    }

    $(document).click(function (e) {
        putOldValueBack();
    });
});

$(function () {

    function revert() {
        $("#tabledata .editfield").each(function () {
            var $td = $(this).closest('td');
            $td.empty();
            $td.text($td.data('oldText'));
            $td.data('editing', false);

            // canceled            
            console.log('Edit canceled.');
        });
    }

    function save($input) {
        var val = $input.val();
        var $td = $input.closest('td');
        $td.empty();
        $td.text(val);
        $td.data('editing', false);

        // send json or whatever
        console.log('Value changed');
    }


    $('#tabledata td').on('keyup', 'input.editfield', function (e) {
        if (e.which == 13) {
            // save
            $input = $(e.target);
            save($input);
        } else if (e.which == 27) {
            // revert
            revert();
        }
    });

    $("#tabledata td").click(function (e) {

        // consuem event
        e.preventDefault();
        e.stopImmediatePropagation();

        $td = $(this);

        // if already editing, do nothing.
        if ($td.data('editing')) return;
        // mark as editing
        $td.data('editing', true);

        // get old text
        var txt = $td.text();

        // store old text
        $td.data('oldText', txt);

        // make input
        var $input = $('<input type="text" class="editfield">');
        $input.val(txt);

        // clean td and add the input
        $td.empty();
        $td.append($input);
    });


    $(document).click(function (e) {
        revert();
    });
});