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

Question

我编写代码时，当用户双击 <td> 时我是元素:

• 附加我<input>的 type="text"
• 为其添加一个值并在用户点击回车时更新它

这是我的问题:
如果用户双击 <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());
        }
    });
}

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

Answer 1

在您的情况下，您需要 .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());
  });
}

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