HTMLテーブル行データを編集する

Question

こんにちは皆さん、

テキストフィールドの値を更新中にエラーが発生します。 1つのテキストフィールドを更新すると、残りのすべてが同じ値で自動的に更新されます。ここで

リンクが私のソースコードが含まれています：

http://jsfiddle.net/jFycy/284/

私の要件は、その特定のフィールドを更新することです。

$(function() { 
    $(".inner, .inner2").dblclick(function (e) { 
     e.stopPropagation(); 
     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() { 
      $(currentEle).html($(".thVal").val().trim()); 
    }); 
} 

Answer 1

あなたはcontenteditable属性を持つこの

$(function() { 
 
    $(".inner, .inner2").dblclick(function(e) { 
 
    // check text input element contains inside 
 
    if (!$('.thVal', this).length) 
 
    // if not then update with the input element 
 
     $(this).html(function(i, v) { 
 
     return '<input class="thVal" type="text" value="' + v + '" />' 
 
    }); 
 
    }).on({ 
 
    // bind keyup event 
 
    'keyup': function(event) { 
 
     // on enter key update the content 
 
     if (event.keyCode == 13) { 
 
     $(this).parent().html($(this).val().trim()); 
 
     } 
 
    }, 
 
    'blur': function() { 
 
     // if focus out the element update the content with iput value 
 
     $(this).parent().html($(this).val().trim()); 
 
    } 
 
    }, '.thVal'); 
 
});

.inner { 
 
    background: red; 
 
} 
 
.inner2 { 
 
    background: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="inner">1</div> 
 
<div class="inner2">1</div> 
 
<div class="inner">1</div>

---

それともはるかに簡単な方法のような何かを行うことができます。

.inner { 
 
    background: red; 
 
} 
 
.inner2 { 
 
    background: grey; 
 
}

<div contenteditable class="inner">1</div> 
 
<div contenteditable class="inner2">1</div> 
 
<div contenteditable class="inner">1</div>

Answer 2

事は、あなたがmyltiple入力を使用して、その一人一人にイベントを付ける、です。

代わりに、1つの入力を作成し、この入力を正確に使用することをお勧めします。

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

http://jsfiddle.net/jFycy/290/

Answer 3

場合（OLのリチウム）のような複数のHTML要素には、あまりにも他のコントロールの値を複製します。このため私はこの変更とその作業を行いました。

$(".updatefield").dblclick(function (e) { 
     **var len = $('.thVal').length; 
     if (len > 0) { 
      $(".thval").remove(); 
      return;** 
     } 
     e.stopPropagation();  //<-------stop the bubbling of the event here 
     var currentEle = $(this); 
     var value = $(this).html(); 
     updateVal(currentEle, value); 
    }); 



    function updateVal(currentEle, value) { 

     var wid = currentEle.width() + 30; 
     var hei = currentEle.height()+ 10; 

     //$(currentEle).html('<input class="thVal" type="text" value="' + value + '" />'); 
     $(currentEle).html('<textarea class="thVal">' + value + '</textarea>'); 
     $(".thVal").css("width", wid); 
     $(".thVal").css("height", hei); 
     $(".thVal").css("background", "lightyellow"); 
     $(".thVal").focus(); 


     $(".thVal").keyup(function (event) { 
      if (event.keyCode == 13) { 

       if ($(".thVal").val() == "") 
        $(".thVal").val("EMPTY"); 
       $(currentEle).html($(".thVal").val().trim()); 
      } 
     }); 

     $(document).click(function() { // you can use $('html') 
      **var e = jQuery.Event("keyup"); 
      e.which = 13; // Enter 
      e.keyCode = 13; // Enter 
      $('.thVal').trigger(e);** 
     });