Bearbeiten von HTML-Tabellenzeilendaten

Question

Hallo Leute ..,

Ich bekomme Fehler beim Aktualisieren von Textfeld Werte. Wenn ich ein Textfeld aktualisiere, werden alle übrigen automatisch mit demselben Wert aktualisiert. Hier

ist der Link enthält meine Quellcode:

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

Meine Forderung ist nur, dass bestimmte Feld zu aktualisieren.

$(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

Sie können

$(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>

---

Oder viel einfachere Methode mit einem contenteditable Attribut wie diese etwas tun.

.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

Das Ding ist, verwenden Sie myltiple Eingänge und Anbringen Ereignis zu jedem von ihm.

Stattdessen empfehle ich Ihnen, eine Eingabe zu erstellen und genau diese bestimmte Eingabe zu verwenden.

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

Wenn mehrere html-Element wie (OL li) ist es auch Wert in anderen Steuerelemente duplizieren. Dafür habe ich diese Veränderungen vorgenommen und es funktioniert.

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