Cómo editar y actualizar el valor de <td> al hacer doble clic en Jquery

Escribí mi código de manera que cuando el usuario hace doble clic en un elemento <td> , yo soy:

  • añadiendo am <input> of type="text"
  • agregarle un valor y actualizarlo si el usuario hace clic en ingresar

Aquí está el problema mío:
Si el usuario hace doble clic en <td> y hace clic en otra <td> sin presionar enter, necesito que la <input> <td> inicial se restablezca al valor anterior.

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

Por favor, ayúdame. No quiero usar la tabla de datos editable.

3 Solutions collect form web for “Cómo editar y actualizar el valor de <td> al hacer doble clic en Jquery”

Aquí en su caso necesita .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()); }); } 

En lugar de hacer clic en el body realice el evento en document o html que es el elemento primario de todos los demás elems.

Se arregló la última respuesta. al verificar quién desencadenó el evento, puedo evitar el problema del doble clic en la input.

Además, con .off ('clic') no tiene el problema de que cada td que actualizó antes cambia con la última.

 $(function () { $(".inner").dblclick(function (e) { if($(event.target).attr('class')!="thVal") { e.stopPropagation(); var currentEle = $(this); var value = $(this).html(); updateVal(currentEle, value); } }); }); function updateVal(currentEle, value) { $(document).off('click'); $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />'); $(".thVal").focus(); $(".thVal").keyup(function (event) { if (event.keyCode == 13) { $(currentEle).html($(".thVal").val()); } }); $(document).click(function () { if($(event.target).attr('class')!="thVal") { $(currentEle).html($(".thVal").val()); $(document).off('click'); } }); } 

Sé que es un tema viejo … pero la respuesta que se publicó aquí no funcionó bien debido al clic de evento en la input, tomé la respuesta y la modifiqué

 $(".daily-signals > tbody > tr > td").dblclick(function (e) { e.stopPropagation(); //<-------stop the bubbling of the event here var currentEle = $(this); var value = $(this).html(); console.log('fire!'); updateVal(currentEle, value); }); function updateVal(currentEle, value) { $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />'); var thVal = $(".thVal"); thVal.focus(); thVal.keyup(function (event) { if (event.keyCode == 13) { $(currentEle).html(thVal.val()); save(thVal.val()); } }); thVal.focusout(function () { $(currentEle).html(thVal.val().trim()); return save(thVal.val(); }); } function save(value) { console.log(value); } 

la function de save hará que la request de ajax

  • javascript: obtenga dos numbers de una cadena
  • ¿Cómo identificar el marcador del folleto durante un evento `popupopen`?
  • Javascript devuelve la llamada por nombre de function en atributo de datos
  • El evento transitionend no se dispara cuando termina mi animation
  • Push Notifications / Messaging en la aplicación web HTML5
  • Convierta tags en entidades html
  • Jquery count solo numbers en una cadena
  • jQuery desplazarse hacia la parte inferior del elemento no superior
  • jQuery form plugin - abort request
  • jQuery Tablesorter Pagination Buttons Not Firing
  • ¿Existe un plugin de recorte de image jQuery similar al recorte de image de Facebook?
  • ¿Cuál es el equivalente jQuery de la function Prototipo .activate ()
  • JQUERY Obtener valor de <span> onclick
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.