如何编辑和更新< td>双击Jquery时的值 [英] How to edit and update <td> value when double click Jquery

问题描述

我写过我的代码，当用户双击< td> 元素时，我就是：

<添加<输入> type =text >

向其中添加一个值并在用户点击时更新它

这里是我的问题：


如果用户双击< td> 并点击另一个<$ c $我需要最初的< td> 的< input>< td>
$ p> //选择表格< th>奇数元素
$（＃div table td）。dblclick（function（）{
var currentEle = $（this）;
var value = $（this）.html（）;
updateVal（currentEle，value）;
}）;

函数updateVal（currentEle，value）
{
$（currentEle）.html（'< input class =thValtype =textvalue ='+值+'/>'）;
$（。thVal）。focus（）;
$（。thVal）。keyup（function（event）{
if（event.keyCode == 13）{
$（currentEle）.html（$（。thVal ）.val（）。trim（））;
}
}）;如果（（'.thVal'）.length！= 0）$ b $（'.thVal'）。click（function（）{
）
$ b $（'body'）。 b {
$（currentEle）.html（$（.thVal）.val（）。trim（））;
}
}）;
}


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

解决方案

在你的情况下，你需要 .stopPropagation（）： http://jsfiddle.net/jFycy/

  $（function（）{
 $（＃div table td）。dblclick（function（e）{
 e .stopPropagation（）; //< -------停止事件冒泡
 var currentEle = $（this）; 
 var value = $（this）.html（） ; 
 updateVal（currentEle，value）; 
}）; 
}）; 
 
函数updateVal（currentEle，value）{
 $（currentEle）.html（'< input class =thValtype =textvalue ='+ value +' />'）; 
 $（。thVal）。focus（）; 
 $（。thVal）。keyup（function（event）{
 if（event.keyCode == 13）{
 $（currentEle）.html（$（。thVal ）.val（）。trim（））; 
} 
}）; 
 $ b $（document）.click（function（）{//你可以使用$（'html'）
 $（currentEle）.html（$（。thVal）.val （）.trim（））; 
}）; 
} 
  

改为点击 body 在文档或 html 上执行事件，这是所有其他元素的父元素。

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

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

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.

// 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.

解决方案

Here in your case you need .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 body do the event on document or html which is the parent elem of all others elems.

这篇关于如何编辑和更新&lt; td&gt;双击Jquery时的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！