Javascript 双击Jquery时如何编辑和更新<td>值

How to edit and update <td> value when double click Jquery

提问by vvr02

I have written my code such that when user double clicks on a <td>element I am:

我已经编写了我的代码，当用户双击一个<td>元素时，我是：

• appending am <input>of type="text"
• adding a value to it and update it if the user clicks on enter

• 附加 am <input>oftype="text"
• 给它添加一个值并在用户点击回车时更新它

Here is the my problem:
If user double clicks on <td>and clicks on another <td>without pressing enter, I need the initial <td>'s <input>to be reset to previous value.

这里是我的问题：
如果用户双击<td>，然后点击了另一个<td>不按回车，我需要最初<td>的<input>被重置为以前的值。

// Selecting the table <th> odd elements
$("#div table td").dblclick(function(){
    var currentEle = $(this);
    var value = $(this).html();
    updateVal(currentEle, value);
});

function updateVal(currentEle, value)
{
    $(currentEle).html('<input class="thVal" type="text" value="'+value+'" />');
    $(".thVal").focus();
    $(".thVal").keyup(function(event){
        if(event.keyCode == 13){
            $(currentEle).html($(".thVal").val().trim());
        }
    });

    $('body').not(".thVal").click(function(){
        if(('.thVal').length != 0)
        {
            $(currentEle).html($(".thVal").val().trim());
        }
    });
}

Please help me. I don't want to use jeditable datatable.

请帮我。我不想使用 jeditable 数据表。

回答by Jai

Here in your case you need .stopPropagation(): http://jsfiddle.net/jFycy/

在您的情况下，您需要.stopPropagation()：http: //jsfiddle.net/jFycy/

$(function () {
    $("#div table td").dblclick(function (e) {
       e.stopPropagation();      //<-------stop the bubbling of the event here
       var currentEle = $(this);
       var value = $(this).html();
       updateVal(currentEle, value);
    });
});

function updateVal(currentEle, value) {
  $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
  $(".thVal").focus();
  $(".thVal").keyup(function (event) {
      if (event.keyCode == 13) {
          $(currentEle).html($(".thVal").val().trim());
      }
  });

  $(document).click(function () { // you can use $('html')
        $(currentEle).html($(".thVal").val().trim());
  });
}

Instead doing click on bodydo the event on documentor htmlwhich is the parent elem of all others elems.

而不是点击body执行事件，document或者html是所有其他元素的父元素。

回答by Carlos Pollastri

Fixed the last answer. by checking who triggered the event i can prevent the double click issue on the input.

修复了最后一个答案。通过检查谁触发了事件，我可以防止输入出现双击问题。

Also, with the .off('click') you dont have the problem where every td you updated before changes with the last one.

此外，使用 .off('click') 您不会遇到在更改之前更新的每个 td 的问题。

$(function () {
    $(".inner").dblclick(function (e) {
        if($(event.target).attr('class')!="thVal")
            {
                e.stopPropagation();
                var currentEle = $(this);
                var value = $(this).html();
                updateVal(currentEle, value);
        }
    });
});

function updateVal(currentEle, value) {
    $(document).off('click');
    $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {

            $(currentEle).html($(".thVal").val());
        }
    });

    $(document).click(function () {

            if($(event.target).attr('class')!="thVal")
            {
                $(currentEle).html($(".thVal").val());
                $(document).off('click');
            }

    });

}

回答by yura sk

I know its an old topic... but the answer that posted here didnt worked well because of the click event on the input, I took the answer and modified it

我知道这是一个古老的话题......但是由于输入上的点击事件，这里发布的答案效果不佳，我接受了答案并对其进行了修改

$(".daily-signals > tbody > tr > td").dblclick(function (e) {
    e.stopPropagation();      //<-------stop the bubbling of the event here
    var currentEle = $(this);
    var value = $(this).html();
    console.log('fire!');
    updateVal(currentEle, value);
});

function updateVal(currentEle, value) {
    $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
    var thVal = $(".thVal");
    thVal.focus();
    thVal.keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html(thVal.val());
            save(thVal.val());
        }
    });

    thVal.focusout(function () {
        $(currentEle).html(thVal.val().trim());
        return save(thVal.val()); // <---- Added missing semi-colon
    });

}

function save(value) {
    console.log(value);
}

the save function will make the ajax request

保存功能将发出ajax请求