¿Cómo hacer que la celda de la tabla HTML sea editable?

Puede usar el atributo contenteditable en las celdas, filas o tabla en cuestión.

Actualizado para compatibilidad con IE8

 
I'm editable
I'm also editable
 
I'm not editable
  

Solo tenga en cuenta que si hace que la tabla sea editable, al menos en Mozilla, puede eliminar filas, etc.

También necesitaría verificar si los navegadores de su público objective son compatibles con este atributo.

En cuanto a escuchar los cambios (para poder enviarlos al servidor), vea los eventos de cambio contentables

HTML5 admite contenteditable,

 Heading 1Heading 2 

Tengo tres enfoques, aquí puede usar tanto como según sus requisitos.

1. Use Entrada en

.

Usando el elemento en todos

s,

 .... 

También es posible que desee cambiar el tamaño de la entrada al tamaño de su td. ex.,

 input { width:100%; height:100%; } 

2. Utilice contenteditable='true' atributo contenteditable='true' . (HTML5)

Pero si desea utilizar contenteditable='true' , también puede guardar los valores apropiados en la base de datos. puedes lograr esto con ajax.

Puede adjuntar keyhandlers keyup , keydown , keypress , etc. a

. También es bueno usar algo de delay () con esos eventos cuando el usuario escribe continuamente, el evento ajax no se activará con cada pulsación de tecla del usuario. por ejemplo,

 $('table td').keyup(function() { clearTimeout($.data(this, 'timer')); var wait = setTimeout(saveData, 500); // delay after user types $(this).data('timer', wait); }); function saveData() { // ... ajax ... } 

3. Agregue a

cuando se haga clic.

Agregue el elemento de entrada en td cuando se

clic en

, reemplace su valor de acuerdo con el valor del td. Cuando la entrada está borroneada, cambie el valor del td con el valor de la entrada. Todo esto con javascript.

Puedes usar x-editable https://vitalets.github.io/x-editable/ su increíble librería desde bootstrap

Si usas Jquery, este plugin te ayuda es simple, pero es bueno

https://github.com/samuelsantosdev/TableEdit

Prueba este código

 $(function () { $("td").dblclick(function () { var OriginalContent = $(this).text(); $(this).addClass("cellEditing"); $(this).html(""); $(this).children().first().focus(); $(this).children().first().keypress(function (e) { if (e.which == 13) { var newContent = $(this).val(); $(this).parent().text(newContent); $(this).parent().removeClass("cellEditing"); } }); $(this).children().first().blur(function(){ $(this).parent().text(OriginalContent); $(this).parent().removeClass("cellEditing"); }); }); }); 

También puede visitar este enlace para más detalles:

• jQuery y tabla HTML editable

Este es un ejemplo único y ejecutable.

        
 
 
id
 
name
 
 
 
001
 
dog
 
 
 
002
 
cat
 
 
 
003
 
pig
 
 
    

Simplemente inserte el elemento en

dinámicamente, al hacer clic en la celda. Solo HTML simple y Javascript. Sin necesidad de contenido contentEditable , jquery , HTML5

https://Jsfiddle.net/gsivanov/38tLqobw/2/

esto es realmente sencillo, esta es mi muestra de HTML, jQuery … y funciona como un amuleto, construyo todo el código usando una muestra de datos json en línea. aclamaciones

<< HTML >>

<< jQuery >>

Este es el punto esencial, aunque no es necesario que el código sea tan desordenado. En su lugar, podría iterar a través de todos los

y agregar con los atributos y, finalmente, poner los valores.

 function edit(el) { el.childNodes[0].removeAttribute("disabled"); el.childNodes[0].focus(); window.getSelection().removeAllRanges(); } function disable(el) { el.setAttribute("disabled",""); }