• Inicio
• Contactanos
• Sobre Nosotros

Manipular Tablas HTML con DOM

Habitualmente y en las mayoría de los Sitios de Desarrollo Webs, nos encontramos con consejos de como armar o maquetar una Web con Capas, CSS, Javascript, etc., de tal forma de crear portales usables, accesibles y semánticas, y un !No utilizar tablas!. Pues bien, las tablas tienen su propósito y no es justamente para armar sitios, sino tabular datos. Ahora bien, si sos desarrollador o estas empezando con el mundillo de desarrollo Web, no deberías omitir aprender algo de ellas. En esta oportunidad intentaré explicar como optener información y manipular Tablas desde el DOM con ayuda de Javascript.
Pero ¿Que es DOM?.

En resumen, DOM (Document Object Model) es un conjunto de utilidades específicamente diseñadas para manipular documentos XML. Por extensión, DOM también se puede utilizar para manipular
documentos XHTML y HTML. Técnicamente, DOM es una API de funciones que se pueden utilizar para manipular las páginas XHTML de forma rápida y eficiente.

La intensión del post no es explicar en detalles el DOM, ya que llevaría todo un libro hacerlo, por lo que dejo en tus manos investgar más al respecto.

Algunos de los métodos o propiedades puntuales para manipular tablas son las siguientes:
rows: Devuelve un array con las filas de la Tabla
tBodies: Devuelve un array con todos los <tbody> de la tabla
insertRow(posicion): Inserta una nueva fila en la posición indicada dentro del array de filas de la tabla
deleteRow(posicion): Elimina la fila de la posición indicada.

Propiedades y métodos de <tr>:
cells: Devuelve un array con las columnas de la fila seleccionada
insertCell(posicion): Inserta una nueva columna en la posición indicada dentro del array de columnas
de la fila.

Pasemos a un ejemplo práctico:
Primero creamos una tabla sencilla en html.

<!--Diseño de la tabla-->
<!--*************-->
<table summary="Descripción de la tabla y su contenido" id="miTabla">
	<caption>Porcentaje de Frutas pos Pais</caption>
	<thead>
		<tr>
			<th scope="col"></th>
			<th scope="col">Manzanas</th>
			<th scope="col">Bananas</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th scope="col"></th>
			<th scope="col">Total: 160 </th>
			<th scope="col">Total: 175 </th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th scope="row">Argentina</th>
			<td>150</td>
			<td>160</td>
		</tr>
		<tr>
			<th scope="row">Brasil</th>
			<td>110</td>
			<td>115</td>
		</tr>
	</tbody>
</table>

A continuación, realizamos algunas manipulaciones a la Tabla con la ayuda de DOM, para lo cual incluimos unos botones para ejecutarlas con algo de Javascript:

<input type="button" onclick="ObtenerNumFilas()" name="btn_numfilas" value="Numero de Filas" />
<br>
<input type="button" onclick="ObtenerNumCuerpos()" name="btn_numCuerpos" value="Numero de Cuerpos" />
<br>
<input type="button" onclick="ObtenerNum1Cuerpos()" name="btn_numCuerpos" value="Numero de Filas del Cuerpo" />
<br>
<input type="button" onclick="BorrarPrimerFila()" name="btn_numCuerpos" value="Borrar la Primer Fila" />
<br>
<input type="button" onclick="ObtenerNumCol()" name="btn_numCuerpos" value="Obtener Numero de Columnas" />
<br>
<input type="button" onclick="ObtenerPrimerTexto()" name="btn_numCuerpos" value="Obtener Primer Texto" />
<br>
<input type="button" onclick="InsertarFila()" name="btn_numCuerpos" value="Insertar Filas" />

Ahora solo nos queda incluir algunas funciones útiles.

- Obtener el Número de filas de nuestra tabla

function ObtenerNumFilas(){
	//obtener el numero de filas
        var tabla = document.getElementById("miTabla");
	var numFilas = tabla.rows.length;
	alert("Número de Filas: "+ numFilas);
}

- Obtener el numero de cuerpos, los

function ObtenerNumCuerpos(){
        //obtener el numero de cuerpos
	var tabla = document.getElementById('miTabla');
	var numCuerpos = tabla.tBodies.length;
	alert("Número de Cuerpos: "+numCuerpos);
}

- Obtener la cantidad de filas que contiene el primer cuerpo

function ObtenerNum1Cuerpos(){
        //obtener el numero de filas del cuerpo
	var tabla = document.getElementById('miTabla');
	var numFilasCuerpo = tabla.tBodies[0].rows.length;
	alert("Número de Filas del Primer Cuerpo: "+numFilasCuerpo);
}

- Borrar la primer fila

function BorrarPrimerFila(){
        //borrar la primer fila
        //
	var tabla = document.getElementById('miTabla');
	tabla.deleteRow(0);
	tabla.tBodies[0].deleteRow(0);
}

- Obtener el número de columnas

function ObtenerNumCol(){
//obtener el numero de columnas
var tabla = document.getElementById('miTabla');
var numColumnas = tabla.rows[0].cells.length;
alert("Numero de Columnas: "+numColumnas);
}

- Obtener el texto de la Fila 1, Columna 1

Function ObtenerPrimerTexto(){
        //obtener el texto de la fila 1, columna 1
	var tabla = document.getElementById('miTabla');
	var texto = tabla.tBodies[0].rows[0].cells[0].innerHTML;
	alert("Texto de la Columna 1, Fila 1: "+texto);
}

- Insertar Fila

function InsertarFila(){
        //insertar nueva fila
	var tabla = document.getElementById('miTabla');
	// Insertar la tercera fila
	tabla.tBodies[0].insertRow(2);
	// Crear la columna de tipo <th> que hace de cabecera de fila
	var cabecera = document.createElement("th");
	cabecera.setAttribute('scope', 'row');
	cabecera.innerHTML = 'Paraguay'
	tabla.tBodies[0].rows[2].appendChild(cabecera);
	// Crear las dos columnas de datos y añadirlas a la nueva fila
	tabla.tBodies[0].rows[2].insertCell(1);
	tabla.tBodies[0].rows[2].cells[1].innerHTML = '210';
	tabla.tBodies[0].rows[2].insertCell(2);
	tabla.tBodies[0].rows[2].cells[2].innerHTML = '80';
}

De esta manera, también podríamos crear tablas enteras con DOM, pero claro, no es muy práctico. Es de suma utilidad si necesitamos crear o manipular tablas dinamicamente sin refrescar o actualizar una página. Y si podemos combinar con Ajax, podriamos crear una aplicaciones más complejas.
Como vemos, no es tan complicado manipular objetos HTML con DOM, este es un ejemplo práctico de como manejarnos con Tablas, pero podemos manipular todo tipo de objetos HTML, desde parrafos <p>, hasta las capas <div>.
Espero les sea de utilidad. Adjunto la Demo y Descarga del código. Ante cualquier consulta o sugerencia, no dudes en ponerlo en los comentarios.
Cordiales Saludos.

También te puede Interesar

• 10 funciones imprescindibles en Javascript (0)
• Resumen MiCodigoBeta 2009 – 2008 (0)
• Estilizar listas con jQuery y CSS (2)
• Operaciones con Combos (select) (1)
• Lector de Noticias con XML, PHP y jQuery (4)

¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscribes a mi feed y obtienes artículos como este enviados a tu lector de feeds.

Copyright Mi Codigo Beta | Potenciado por WordPress | Deep Blue Theme | Traducido por Trazos Web