HTML 테이블 행 데이터 편집

Question

안녕하십니까.

텍스트 필드 값을 업데이트하는 중 오류가 발생합니다. 하나의 텍스트 필드를 업데이트하면 나머지는 모두 동일한 값으로 자동 업데이트됩니다. 여기

링크 내 소스 코드가 포함되어 있습니다 :

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 입력을 사용하여 부착.

대신 하나의 입력을 만들고이 입력을 정확하게 사용하는 것이 좋습니다.

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

Answer 3

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

때 너무 다른 컨트롤의 값 중복 (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);** 
     });