8

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

  • 附加 am <input>oftype="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 数据表。

4

3 回答 3

13

在您的情况下，您需要.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是所有其他元素的父元素。

于 2013-02-07T06:32:20.387 回答
4

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

此外，使用 .off('click') 您不会遇到问题，即在更改最后一个 td 之前更新的每个 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');
            }

    });

}
于 2016-11-03T17:42:05.227 回答
2

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

$(".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);
}

保存功能将发出ajax请求

于 2017-05-22T08:51:36.610 回答