Tablas HTML Dinámicas
Visita este artículo en http://www.estadobeta.com/2008/05/05/tablas-html-dinmicas/
Por vladimir en Desarrollo, artículos, javascriptManipulando tablas HTML con Javascript y el DOM
De cuando en cuando nos vemos enfrentados a la creación de tablas para el ingreso o muestra de datos. Algunos elegirán hacerlo con el elemento HTML TABLE y otros con DIV (ver nota al pie). Lo cierto es que desde que nos llegó la Web 2.0 la tendencia a refrescar dichas tablas en tiempo real -con o sin AJAX- es una necesidad.
Muchas veces decidido por el usuario, se trata de agregar filas a la tabla en forma dinámica de manera de disminuir las idas y venidas desde y hacia el servidor, además de hacerlo más rápido, se ve muy bien y denota que nuestro sitio es “moderno”.
Sigue leyendo.
Tablas usando TABLE
En Javascript, la construcción de filas dinámicamente se basa en el método insertRow de la etiqueta TABLE, el cual crea una nueva fila al final y en blanco.
Por ende el llenado de dicha fila puede ser mediante el uso completo de métodos que vayan creando todos los elementos en el DOM, o bien, crear cada celda (etiqueta TD) con el método insertCell y el llenado de la misma con el desdichado innerHTML.
Digo desdichado, porque lo que recomiendan algunos manuales es no usarlo (aunque es soportado por todos los navegadores modernos, no forma parte del DOM estandar), pero según mi experiencia -en el caso de usar TABLE- es lo más rápido.
-
-
var tabla = document.getElementById(‘tabla_table’);
-
-
var nuevaFila = tabla.insertRow(-1);
-
-
var celda = nuevaFila.insertCell(-1);
-
-
celda.innerHTML = ‘algo en HTML’;
La tendencia a construir tablas con la etiqueta TABLE es cada vez menor, pero hay circunstancias que ameritan su uso. Pese a ello, tiene sus ventajas como por ejemplo, el tiempo de diseño es menor, ya que cada columna se auto-ajusta. O bien, la selección de la tabla sobre el sitio, y el posterior pegado en una planilla electrónica -por ejemplo-, queda de forma perfecta y casi igual a como se ve en web.
Tablas usando otros elementos
Esta modalidad tiene por finalidad hacer lo mismo que la anterior, pero usando elementos de bloque más sencillos que TABLE como DIV, DL, P, UL, OL u otros. La creación de filas en el caso de estos elementos es mucho más simple. Aunque se puede hacer de variadas formas, la mejor -según mi punto de vista- es clonar una fila ya creada, oculta en algún lugar de nuestro código.
La idea es capturar el elemento contenedor, clonar con el método cloneNode, volverlo visible y finalmente insertarlo en el contenedor de la tabla con el método appendChild.
-
-
<div id="tabla_div">Esta es una fila</div>
-
-
-
var tabla = document.getElementById(‘tabla_div’);
-
-
var plantilla = document.getElementById(‘fila_oculta’);
-
-
var nuevaFila = plantilla.cloneNode(true);
-
-
nuevaFila.style.display = ”; //hacemos visible la fila
-
-
tabla.appendChild(nuevaFila);
A diferencia de TABLE se gastará un poco más de tiempo en el CSS, pero se ganará en el código Javascript haciendo más legible la lógica de programación.
Aquí podrás ver un ejemplo funcionando para ambos casos.
Generalizando
Aplicando la misma lógica de DIV, durante el último tiempo tuve que hacer una clase usando Mootools para facilitar la creación de items de un documento tipo factura.
-
-
items1 = new mooItems({
-
-
containerId: ‘table1′,
-
-
cloneId: ‘row1_hidden’,
-
-
calItems: {
-
-
operatorsClasses: [‘operator1′,‘operator2′],
-
-
formula: ‘operator1*operator2′,
-
-
resultClass: ‘result’
-
-
}
-
-
});
Este código supone que existen INPUTs que tienen las clases CSS operator1, operator2 y result. Asíla clase toma lo que está en esas casillas, calcula la operación matemática y dejará el resultado en la casilla que contenga la clase result correspondiente a la misma fila.
Hay más ejemplos funcionado y el código de la clase aquí.
enlaces útiles:
TABLE es apropiado cuando la naturaleza de la información a mostrar es tabular, es decir hay algun tipo de relación objeto-atributo entre las partes que pueden ser representada en filas y columnas. TABLE no debiera ser usado sólo para lograr determinados efectos de diseño (más sobre eso aquí).
En este artículo, sin embargo, nos referimos a tabla en el sentido general de presentar información como una serie de elementos visualmente similares, tabular o no. Esto puede ser logrado mediante la combinación de CSS y elementos como DIV, DL, UL o por supuesto TABLE
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
5/6/2008 at 12:47 am
gracias friend por tus siempre buenos consejos
5/6/2008 at 2:01 pm
@Coto gracias a ti, hago rebotar la buena onda a Vladimir, autor de este articulo.
5/9/2008 at 5:16 pm
Está buena y útil la nota, sobre todo porque no sabía de insertRow e insertCell para trabajar con tablas.
Creo que en conjunto con librerías como jquery, prototype o mootools pueden hacerse cosas interesantes y fáciles.
Lo que sí, me gustría recalcar lo que señalas en la nota al pie. Es decir, a usar tablas cuando los datos son tabulares, a usar ul para listas, dl para listas de definición y no abusar de los div y span.
Saludos