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

  • Uso de TypeAhead con jQuery y Bootstrap 2.1
  • Agregar y eliminar class activa en el button con la function jquery onclick
  • JQuery DataTable: establece colspan del título de la columna de forma dinámica
  • Obtener json, url de la image
  • ¿Es imposible separar javascript de HTML?
  • Cómo saber la versión de jQuery programáticamente
  • ¿Es posible compartir una image en Facebook usando un URI de datos?
  • volver a unir jquery después de angular js ng-repeat
  • HTML5 - localStorage elimina y borra todos los datos
  • Raya: HTML Checkout iOS Cordova no abre
  • ¿Para qué es el argumento?
  • En jQuery o JavaScript, select el elemento secundario junto al padre
  • pendig bootstrap modal en clic para cargar datos remotos
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.