¿Cómo obtener valores de tablas con JavaScript? - Curso de JavaScript de cero a máster - Capítulo 53

En esta ocasión, te voy a enseñar a utilizar las tablas con el DOM. Te enseñaré a analizar las tablas html y a obtener sus datos de manera individual o de manera masiva con bucles.

Esta es la tabla que puedes utilizar para seguir los ejemplos. Recuerda que si tienes la hoja .js con otro nombre o en otra ruta, lo debes modificar (línea 58).

Etiquetas HTML

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
<title>Curso de JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
</head>
<body style="margin:1em">
<table class="table table-primary table-bordered table-striped table-hover">
	<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>
</body>
<script src="test.js"></script>
</html>

Esta es la tabla cargada en el navegador.

tabla html países

Lo primero, es analizar su estructura. Primero, tenemos la fila 1 que se corresponde a la cabecera de la tabla <thead> (table head).

Estos elementos de la cabecera, tienen cada una de las celdas con la etiqueta <th> (table heading)

Cada fila, se especifica con la etiqueta <tr> (table row)

Las celdas de la columna "Número de país", son encabezados de tabla también.

Las celdas que contienen los países, son <td> (table data).

Ahora que está clara la estructura de la tabla, podemos empezar a practicar con ella.

Obtener un elemento de una tabla con el DOM

Para obtener un dato individual de la tabla, podemos utilizar getElementsByTagName.

Veamos como obtener el valor interno del encabezado Oceanía.

Primero, obtengamos la colección HTML de todas las etiquetas <th>.

Código JavaScript

let obtenerDato = document.getElementsByTagName("th");

console.log(obtenerDato);

terminal Resultado en la consola terminal

HTMLCollection(10) [th, th, th, th, th, th, th, th, th, th]
0: th
1: th
2: th
3: th
4: th
5: th
6: th
7: th
8: th
9: th
length: 10

No sabemos cual es el elemento que nos interesa. Podemos inspeccionar en el navegador de la siguiente forma. En la consola, pasas el cursor por un <th> de la colección HTML. Este se marcará en el documento como ves en la imagen:

Colección HTML

¡Perfecto! Ya sabemos una forma de localizar el elemento correcto.

Código JavaScript

let obtenerDato = document.getElementsByTagName("th");

console.log(obtenerDato[5].innerHTML);

terminal Resultado en la consola terminal

Oceanía

Vayamos ahora a seleccionar un país. Por ejemplo, Italia. Hacemos lo mismo, solo que cambiamos el "th" por "td".

Código JavaScript

let obtenerDato = document.getElementsByTagName("td");

console.log(obtenerDato[13].innerHTML);

terminal Resultado en la consola terminal

Italia

Iterar una fila de tabla html con bucle en Javascript

Una vez dominamos esto, veamos como iterar una fila entera. Probemos con la fila 2. Lo vamos a hacer añadiendo un id a las filas, pero que sepas que hay diversas formas de hacer esto mejor (las veremos en el siguiente capítulo).

Etiquetas HTML

<table class="table table-primary table-bordered table-striped table-hover">
	<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 id="fila1">
			<th>1</th>
			<td>Egipto</td>
			<td>México</td>
			<td>Bután</td>
			<td>Inglaterra</td>
			<td>Australia</td>
			</tr>
		<tr id="fila2">
			<th>2</th>
			<td>Etiopía</td>
			<td>Argentina</td>
			<td>China</td>
			<td>España</td>
			<td>Micronesia</td>
		</tr>
		<tr id="fila3">
			<th>3</th>
			<td>Marruecos</td>
			<td>Colombia</td>
			<td>Japón</td>
			<td>Italia</td>
			<td>Samoa</td>
		</tr>
		<tr id="fila4">
			<th>4</th>
			<td>Libia</td>
			<td>Perú</td>
			<td>Turquía</td>
			<td>Dinamarca</td>
			<td>Nueva Zelanda</td>
		</tr>
	 </tbody>
</table>

Ahora, le diremos a JavaScript, que obtenga los elementos solo de la fila 2 por su id.

De la colección HTML obtenida, vamos a obtener solo los elementos <td>.

Código JavaScript

// Obtenemos la fila 2
let obtenerFila = document.getElementById("fila2");

// Obtenemos los elementos td de la fila
let elementosFila = obtenerFila.getElementsByTagName("td");

// Mostramos la colección HTML de la fila.
console.log(elementosFila);

terminal Resultado en la consola terminal

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

Con esto, ya tenemos la fila que queremos y la colección que queremos. Solo queda hacer un bucle que itere dicha fila.

Código JavaScript

// Obtenemos la fila 2
let obtenerFila = document.getElementById("fila2");

// Obtenemos todos los td de la fila
let elementosFila = obtenerFila.getElementsByTagName("td");

// Iteramos los elementos de la fila para mostrarlos uno por uno.
for (let i=0; i<=4; i++) {
	console.log(elementosFila[i].innerHTML);
}

terminal Resultado en la consola terminal

Etiopía
Argentina
China
España
Micronesia

Obtener una columna completa de una tabla HTML con JavaScript

Hagamos otra práctica. Vamos a acceder a la columna de América.

Podemos hacerlo de esta forma que no es para nada óptima, solo es para que entiendas mejor como se accede a cada parte de la tabla. En el siguiente capítulo veremos mejores prácticas que esta para no tener que repetir tanto código ni obtener datos innecesarios.

Código JavaScript

// Se obtienen las filas.
let obtenerFila1 = document.getElementById("fila1");
let obtenerFila2 = document.getElementById("fila2");
let obtenerFila3 = document.getElementById("fila3");
let obtenerFila4 = document.getElementById("fila4");

// Se obtienen los elementos td de cada fila
let elementosFila1 = obtenerFila1.getElementsByTagName("td");
let elementosFila2 = obtenerFila2.getElementsByTagName("td");
let elementosFila3 = obtenerFila3.getElementsByTagName("td");
let elementosFila4 = obtenerFila4.getElementsByTagName("td");

// Mostramos el valor del segundo elemento de cada fila.
console.log(elementosFila1[1].innerHTML);
console.log(elementosFila2[1].innerHTML);
console.log(elementosFila3[1].innerHTML);
console.log(elementosFila4[1].innerHTML);

terminal Resultado en la consola terminal

México
Argentina
Colombia
Perú

Necesitamos tantas líneas en este caso, porque la tabla está separa en bloques con las celdas de cada fila. Las filas son muy buenas de obtener, pero las columnas tienen algunas dificultades, puesto que necesitamos acceder a una celda de cada fila. Por eso, primero, hay que obtener cada fila y después, la celda que queramos de cada una de ellas.

Podemos hacer esto mal, o bien, aprender nuevas palabras de JavaScript para hacer esto más óptimo y con bucles. No obstante, será en el próximo capítulo.