8

<td>ユーザーが要素をダブルクリックすると、次のようになるようにコードを記述しました。

  • <input>の午前を追加type="text"
  • それに値を追加し、ユーザーが入力をクリックすると更新します

ここに私の問題があります：
ユーザーがダブルクリックしてEnterキーを押さず<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 datatableを使いたくありません。

4

3 に答える 3

13

ここであなたの場合は必要です：http .stopPropagation()：//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イベントをクリックして実行します。documenthtml

于 2013-02-07T06:32:20.387 に答える