Una parte muy importante del aprendizaje de la programación es la práctica. Ahora iremos presentando una serie de desafíos para que se los intente resolver, en el caso que no se pueda llegar a una solución total o se quiera ver otro algoritmo para su solución los dejaremos codificados para su consulta.
Problema: Creación de una tabla HTML en forma dinámica
Se tiene un arreglo con una serie de objetos que almacenan el nombre y la edad de personas:
const personas = [{
nombre: "dardo",
edad: 52
}, {
nombre: "pedro",
edad: 522
}, {
nombre: "ana",
edad: 89
}, {
nombre: "alicia",
edad: 55
}, {
nombre: "carlos",
edad: 21
}, {
nombre: "capitanich",
edad: 89
}, {
nombre: "carla",
edad: 66
}, {
nombre: "altina",
edad: 90
}]
Se debe crear una tabla HTML que se genere en forma dinámica en la página.
Disponer un control input para el ingreso de un nombre, capturar el evento 'keyup' y proceder a actualizar la tabla mostrando solo los nombres que empiecen con los caracteres ingresados.
La interfaz visual debe ser similar a esta, si se han ingresado los caracteres 'ca':
Solución
La lectura de la solución debería efectuarse luego de haber intentado resolverlo en forma individual.
La página HTML es muy sencilla debido que la tabla se debe crear en forma dinámica con JavaScript.
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
</head>
<body>
<div id="tabla">
</div>
<input type="text" id="buscar">
<script src="funciones.js"></script>
</body>
</html>
Disponemos un div con el id="tabla" para poder acceder y agregar todos los elementos de la tabla HTML, por otro lado el control input permite ingresar caracteres para filtrar todos los nombres que comienzan con ciertos caracteres.
Toda la funcionalidad se encuentra en el archivo JavaScript.
funciones.js
const personas = [{
nombre: "dardo",
edad: 52
}, {
nombre: "pedro",
edad: 522
}, {
nombre: "ana",
edad: 89
}, {
nombre: "alicia",
edad: 55
}, {
nombre: "carlos",
edad: 21
}, {
nombre: "capitanich",
edad: 89
}, {
nombre: "carla",
edad: 66
}, {
nombre: "altina",
edad: 90
}]
function mostrarTabla(palabra) {
let tabla = '<table>'
tabla += '<tr><th>Nombre</th><th>Edad</th></tr>'
for (let persona of personas) {
if (palabra == undefined || persona.nombre.startsWith(palabra))
tabla += `<tr><td>${persona.nombre}</td><td>${persona.edad}</td></tr>`
}
tabla += '</table>'
document.querySelector("#tabla").innerHTML = tabla
}
document.querySelector("#buscar").addEventListener('keyup', () => {
mostrarTabla(document.querySelector("#buscar").value)
})
mostrarTabla()
El algoritmo cuenta con una única función llamada 'mostrarTabla' que recibe un parámetro con el nombre o parte del nombre a buscar y mostrar.
En la última línea del script llamamos a la función 'mostrarTabla' sin enviar datos, esto debido a que el operador todavía no ha ingresado caracteres:
mostrarTabla()
El algoritmo de la función 'mostrarTabla' procede a concatenar una serie de String con las etiquetas HTML necesarias para generar la tabla, inicialmente componemos el título de la tabla:
let tabla = '<table>'
tabla += '<tr><th>Nombre</th><th>Edad</th></tr>'
Seguidamente mediante un for of recorremos el arreglo y generamos cada fila de la tabla HTML:
for (let persona of personas) {
if (palabra == undefined || persona.nombre.startsWith(palabra))
tabla += `<tr><td>${persona.nombre}</td><td>${persona.edad}</td></tr>`
}
Como la primer llamada a la función 'mostrarTabla' no recibe nada en el parámetro 'palabra', el mismo tiene almacenado un valor undefined, luego el if contenido dentro del for se verifica verdadero siempre y en tanto se muestran todos los datos del arreglo.
Fuera del for procedemos mediante la propiedad 'innerHTML' a generar todos los elementos HTML dentro de la página:
tabla += '</table>'
document.querySelector("#tabla").innerHTML = tabla
También nuestro algoritmo registra la escucha de eventos del teclado para el control 'input':
document.querySelector("#buscar").addEventListener('keyup', () => {
mostrarTabla(document.querySelector("#buscar").value)
})
Como podemos observar cada vez que el operador ingresa un caracter se llama a la función mostrarTabla pasando como dato todos los caracteres ingresados hasta ese momento en el control 'input'.
Con esto logramos que la tabla se recree con los datos de personas que comienzan con los caracteres ingresados.