EstadoBeta

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, javascript

Manipulando 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.

Code (javascript)
 
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.

Code (html)

<div id="tabla_div">Esta es una fila</div>

Code (javascript)
 
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.

Code (javascript)
 
items1 = new mooItems({
 
containerId: ‘table1′,
 
cloneId: ‘row1_hidden’‘operator1′,‘operator2′‘operator1*operator2′‘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:

* En términos del uso semántico de HTML -su propósito original-, el elemento 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

Este artículo fue publicado en 5/5/2008 a las 7:11 pm y está archivado bajo Desarrollo, artículos, javascript. Puedes seguir esta discusión a través de su canal RSS 2.0. También puedes enviarlo a Digg para compartirlo con más lectores. Puedes dejar un comentario, o hacer un trackback desde tu propio sitio.

8 comentarios para “Tablas HTML Dinámicas”

Coto Dice:
5/6/2008 at 12:47 am
gracias friend por tus siempre buenos consejos
Ismael Dice:
5/6/2008 at 2:01 pm
@Coto gracias a ti, hago rebotar la buena onda a Vladimir, autor de este articulo.
Max Villegas Dice:
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
vladimir Dice:
6/5/2008 at 9:31 pm
acabo de leer en Ajaxian, una comparativa de crear elementos via DOM y/o via innnerHTML, que es en este artículo toqué de una forma u otra.

lo que más me llamó la atención fue la diferencia entre FF3 y IE8.
buzu Dice:
6/13/2008 at 12:54 pm
Que tal, es muy bueno el aporte, pero cabe aclarar que aun que muchos recomiendan no usar tablas las tablas siguen siendo un elementos estandar necesario en la contruccion de sitios web. Cuando usar tablas? simple, siguiendo la filosofia de la web semantica se deve usar tablas siempre que se quiera mostrar contenido tabulado. En otras palabras, tratar de substituir las tablas por otros elementos com Div, DL, P, UL etc., es una mala practica. Se que tu apuntas al uso de dichos elementos por que es una practica cada vez ma comun. Sin enbargo considero que una aclaracion como la que hago es necesaria cada vez que se hable de temas como este en que los elementos no se usan correctamente. Saludos y como dige al principio, buen aporte.
orlando juan Dice:
7/17/2008 at 11:01 am
necesito pasar lo que esta en cada una de las columnas de una tabla dinamica a un arreglo en php, para poder actualizar una base de datos , ustedes me podrian ayudar, ya que nadie me contesta
orlando juan Dice:
7/17/2008 at 11:08 am
creo que esto esta execelente, ya que actualmente la mayoria de los programadores trabajan como lo han venidodo haciendo otros desde hace años.
vladimir prieto Dice:
7/18/2008 at 6:08 pm
@orlando juan: “necesito pasar lo que esta en cada una de las columnas de una tabla dinamica a un arreglo en php, para poder actualizar una base de datos”

si entiendo bien, bastaría con que los INPUTS HTML que uses los nombres como micasilla[].

luego capturas el archivo php que recibe el submit, haces mencion a $micasilla[0] (o [1]…[n]) para capturar el contenido de esa casilla. puedes iterar esto con un sizeof( $micasilla ) - 1.

espero te sirva…saludos!