Codiguillos de JavierB

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

 

  

Editar datos de una tabla

Esta vez quiero proponeros utilizar una tabla HTML para sumar filas y columnas, pudiendo editar el contenido de las celdas. Os estareis preguntando ¿Para qué, si ya existen hojas de cálculo que hacen más cosas y mejor? Bueno... nunca se sabe si en algún momento resultará útil. En todo caso, en algo hay que entretenerse.

Podeis probarlo en esta misma página:

Tabla que simula una hoja de cálculo

	Ord.	Cantidad 1	Cantidad 2	Total
	1	0	0	0
	2	0	0	0
	ST	0	0	0

También podeis descargar el código, para probarlo tranquilamente en vuestro ordenador.

Algunos detalles a tener en cuenta:

Pulsa en las celdas para que aparezca un cuadro de texto y poder editar los datos. Pulsa fuera de la celda para terminar la edición.

Pulsa en el signo más, en el encabezado de las columnas o en la primera celda de las filas, para añadir filas o columnas. Pulsando en el signo menos se borrar.

Las filas/columnas se añaden antes de la fila o columna en la que se ha pulsado.

A la tabla le teneis que poner id='tabla' o cambiar, en el archivo codigo.js la línea:
var miTabla = 'tabla'; // poner aquí el id de la tabla que queremos editar

La primera fila, la primera columna, la última fila (subtotales) y la última columna (totales) no es editable.

Para que se pueda sumar algo, tiene que haber, como mínimo, 2 filas y 2 columnas, si no hay más de esas cantidades los respectivos botones de borrar (signo menos) no aparecen. Cuando se añadan filas o columnas volverán a mostrarse