54 - Desafío 1: Tabla HTML dinámica
Problema:
pagina.html
estilos.css
funciones.js
Ejecución de la página
<!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>
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()
No tiene disponible el navegador la capacidad de iframe
Retornar