Funciones para iterar tablas HTML desde JavaScript

En esta ocasión te voy a enseñar a crear funciones preparadas para iterar cualquier tabla HTML con JavaScript.

Propiedades para iterar tablas

En JavaScript, tenemos unas propiedades muy útiles para trabajar con tablas. Se trata de rows y cells.

table.rows y table.cells - Obtener filas y columnas de tablas

Palabra del lenguaje nº 83 encontrada.
rows es una propiedad de tabla que devuelve la colección de todos los elementos <tr> (table row).

Palabra del lenguaje nº 84 encontrada.
cells es una propiedad de tabla que devuelve la colección de todos los elementos <th> y/o <td>.

Lo primero que tienes que hacer, es añadir este id a la etiqueta <table>. <id="tablaPaises">.

Con la propiedad de tabla rows, vamos a obtener una colección de los elementos <tr> de la tabla. Ya no necesitamos más los id en cada fila del capítulo anterior (fila1, fila2...). Los puedes borrar.

Finalmente, el documento html nos quedará así:

<table class="table table-primary table-bordered table-striped table-hover" id="tablaPaises">
	<thead class="table-success">
		<tr>
			<th>Número de país</th>
			<th>África</th>
			<th>América</th>
			<th>Asia</th>
			<th>Europa</th>
			<th>Oceanía</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>1</th>
			<td>Egipto</td>
			<td>México</td>
			<td>Bután</td>
			<td>Inglaterra</td>
			<td>Australia</td>
		</tr>
		<tr>
			<th>2</th>
			<td>Etiopía</td>
			<td>Argentina</td>
			<td>China</td>
			<td>España</td>
			<td>Micronesia</td>
		</tr>
		<tr>
			<th>3</th>
			<td>Marruecos</td>
			<td>Colombia</td>
			<td>Japón</td>
			<td>Italia</td>
			<td>Samoa</td>
		</tr>
		<tr>
			<th>4</th>
			<td>Libia</td>
			<td>Perú</td>
			<td>Turquía</td>
			<td>Dinamarca</td>
			<td>Nueva Zelanda</td>
		</tr>
	</tbody>
</table>

Primero, obtengamos la colección de <tr>.

let tabla = document.getElementById("tablaPaises");

console.log(tabla.rows);

HTMLCollection(5) [tr, tr, tr, tr, tr]
0: tr
1: tr
2: tr
3: tr
4: tr
length: 5

Ahora, si desplegamos cada fila en la colección HTML, veremos que contiene cada una su propia colección de cells, celdas en español. Si desplegamos esta, veremos que contiene las celdas de esa misma fila.

Obtengamos de esta forma un dato de la fila 4, por ejemplo Libia.

Obtenemos la tabla por id, seleccionamos la fila 4 con la propiedad rows y a partir de esa propiedad, accedemos a su colección de cells y el número de la posición.

let tabla = document.getElementById("tablaPaises");

console.log(tabla.rows[4].cells[1].innerHTML);

Libia

Ten en cuenta, que en este contexto, la fila 0 es la cabecera de la tabla.

Función para obtener los datos de una fila de tabla

Podemos crear una función que itere automáticamente la fila que queramos de cualquier tabla. Sin tener que escribir código específico para cada una.

Lo primero, será almacenar la tabla que queramos en una variable. Esto es fácil, puesto que le hemos dado un id.

let tabla = document.getElementById("tablaPaises");

Si tenemos varias tablas a las que queremos acceder, lo haremos con un id diferente en cada una y las iremos guardando en variables. Por ejemplo:

let tablaPaises = document.getElementById("tablaPaises");
			let tablaCiudades = document.getElementById("tablaCiudades");
			let tablaPueblos = document.getElementById("tablaPueblos");

Seguimos solo con la tabla de países, ignora el resto. Son solo para un ejemplo. Ahora, lo que haremos, es crear la función.

El primer parámetro, tabla es para indicar la variable de tabla que queramos utilizar con esta función.

El segundo parámetro, numeroFila es para indicar el número de fila que queremos iterar.

Creamos una variable (fila) para almacenar la fila. Con la propiedad rows, vamos a obtener el elemento <tr>; de la fila pasada por parámetro. La fila entera con sus etiquetas <th> y <td> dentro, pero, no la colección.

No hagas caso al error que me aparece en la consola de la imagen. Esto es porque he modificado la función para mostrarte el resultado.

Añadiendo a esta fila obtenida la propiedad cells, vamos a obtener la colección de elementos <th> y <td>. Puesto que las colecciones son iterables, lo tenemos muy bien para obtener cada valor de la fila con un bucle.

function muestraFila(tabla, numeroFila) {
let fila = tabla.rows[numeroFila].cells;
for (const celda of fila) {
	console.log(celda.innerHTML);
}
}

La declaración for of

Palabra del lenguaje nº 85 encontrada.
La declaración for of es una forma rápida de iterar elementos iterables como los array o las colecciones html.

Aquí tengo que explicar algo nuevo, la declaración for of. Tenía pensado dejarlo para la parte avanzada del curso, pero, como nos viene bien para la función, lo explico ya aquí y de paso aprendes algo más de JavaScript.

La declaración for of sencillamente, crea un bucle que se repite sobre objetos iterables como por ejemplo, arrays o colecciones. Hagamos una prueba con un array, así lo entenderás mejor.

let numeros = [0,2,4,8,16,32,64,128,256,512,1024];

for (let i of numeros) {
console.log(i);
}

De manera fácil, estamos iterando el array sin de principio a fin.

0
2
4
8
16
32
64
128
256
512
1024

Para que compares la diferencia entre la forma de for que hemos utilizado en el curso, te dejo aquí el equivalente:

let numeros = [0,2,4,8,16,32,64,128,256,512,1024];

for (let i = 0; i < numeros.length; i++) {
console.log(numeros[i]);
}

En este caso, he tenido que especificar un valor inicial para i, decirle hasta donde tiene que iterar, también que incremente el valor de i y en el console.log, le tengo que poner los corchetes para que vaya cambiando la posición en el array.

Pues ya sabes, para los elementos iterables que quieras iterar de principio a fin, es mejor utilizar un for of.

Ten cuidado con utilizar la palabra of. Esta no está reservada para el lenguaje y podemos hacer un uso confuso de ella, utilizándolo como identificador:

for (let of of numeros) {
console.log(of);
}

Después de este paréntesis, probemos a llamar a una fila de la tabla con esta nueva función:

// Almacenamos la tabla
let tabla = document.getElementById("tablaPaises");

// Llamamos a la función
muestraFila(tabla, 2);

// Itera e imprime la fila que queramos de una tabla
function muestraFila(tabla, numeroFila) {
let fila = tabla.rows[numeroFila].cells;
for (const celda of fila) {
	console.log(celda.innerHTML);
}
}

2
Etiopía
Argentina
China
España
Micronesia

Si nos ponemos quisquillosos, podemos decir que si la tabla lleva <th> al lado, como esta, nos van a aparecer esos datos, en el caso del ejemplo, un 2 que no pinta nada seguramente. Todo depende del propósito, de como está hecha la tabla, etc.

No te preocupes, tengo la solución. Vamos a escribir otra función, que obtenga solo los elementos <td> de las filas. Puesto que a cells no podemos decirle que obtenga solo esos elementos, se lo diremos con nuestro tan utilizado y explotado getELementsByTagName().

// Obtenemos la tabla
let tabla = document.getElementById("tablaPaises");

// Llamamos a la función
muestraFilaTd(tabla, 2);

// Se almacenan los elementos td de la fila
function muestraFilaTd(tabla, numeroFila) {
const fila = tabla.rows[numeroFila].getElementsByTagName("td");
for (const celda of fila) {
	console.log(celda.innerHTML);
}
}

Etiopía
Argentina
China
España
Micronesia

Función para iterar las columnas de una tabla en JavaScript

Para iterar las columnas de las tablas en JavaScript, podemos utilizar un bucle for convencional.

// Obtenemos la tabla
let tabla = document.getElementById("tablaPaises");

// Llamamos a la función
muestraColumna(tabla, 2);

// iteramos todas las filas obteniendo solo el elemento de numeroColumna de cada fila.
function muestraColumna(tabla, numeroColumna {
for (let i = 0, celda; i < tabla.rows.length;  i++) {
	const celda = tabla.rows[i].cells[numeroColumna]
	console.log(celda.innerHTML);
}
}

América
México
Argentina
Colombia
Perú

¿Te molesta no poder obtener la columna sin el elemento de la cabecera (América en el ejemplo)?

Nuevamente, hay solución. Vamos a modificar el valor de i, de un cero a un uno. Así omitiremos el elemento de la fila 0.

// Obtenemos la tabla
let tabla = document.getElementById("tablaPaises");

// Llamamos a la función
muestraColumna(tabla, 2);

// iteramos todas las filas obteniendo solo el elemento de numeroColumna de cada fila.
function muestraColumna(tabla, numeroColumna {
for (let i = 1, celda; i < tabla.rows.length;  i++) {
	const celda = tabla.rows[i].cells[numeroColumna]
	console.log(celda.innerHTML);
}
}

México
Argentina
Colombia
Perú

Ahora, me puedes decir, pero esto es muy poco profesional, esta función, no se adapta entonces a cualquier tabla. Tengo que estar modificándola. Otra vez más, hay solución. Añadir un tercer parámetro.

Sustituimos el valor de i con el parámetro inicio.

En la llamada, por ejemplo, si ponemos el valor 1 en el tercer parámetro, nos obtendrá la columna omitiendo la cabecera que está en la fila 0.

// Obtenemos la tabla
let tabla = document.getElementById("tablaPaises");

// Llamamos a la función
muestraColumna(tabla, 2, 1);

// iteramos todas las filas obteniendo solo el elemento de numeroColumna de cada fila.
function muestraColumna(tabla, numeroColumna, inicio) {
for (let i = inicio, celda; i < tabla.rows.length;  i++) {
	const celda = tabla.rows[i].cells[numeroColumna]
	console.log(celda.innerHTML);
}
}

Ejercicios de JavaScript

112. Crea una tabla html con la aplicación web Tables Generator o escríbela. Esta tabla será del tamaño que quieras. Intenta obtener al menos una fila y una columna de esta tabla utilizando las funciones del capítulo.

La solución la encontrarás aquí: Haz click aquí.