Me gustaría editar algunas celdas de la tabla html, simplemente haga doble clic en una celda, ingrese texto y los cambios se pueden enviar al servidor. No quiero usar algunos kits de herramientas como la cuadrícula de datos dojo. Porque proporciona algunas otras características. ¿Me podría proporcionar algún fragmento de código o consejos sobre cómo implementarlo?
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 1 Heading 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
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:
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
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",""); }