En un articulo anterior tuvimos la oportunidad de ver como eliminar filas de una tabla HTML mediante JavaScript, pues en este articulo veremos un ejemplo sencillo en el cual podremos filtrar datos de una tabla HTML haciendo uso de el mismo lenguaje JavaScript, el resultado de nuestro ejercicio es similar a la imagen expuesta en la cabecera del post, así que sin mas veamos el ejemplo:
[cc lang=»javascript»]
🌟 ¡Visita Nuestra Tienda para Programadores! 🌟Descubre Códigos Fuente, Cursos, Software, Computadoras, Accesorios y Regalos Exclusivos. ¡Todo lo que necesitas para llevar tu programación al siguiente nivel!
Filtrando Tabla HTML con JavaScript
| Persona | Empresa | URL | Accción |
|---|---|---|---|
| Steve Jobs | Apple | https://www.apple.com/ | |
| Larry Page | https://www.google.com.co | ||
| Peter Thiel | PayPal | https://www.paypal.com | |
| Bill Gates | Microsoft | www.microsoft.com |
[/cc]
Puedes copiar el código, pegarlo en algún editor y guardarlo con extensión .html y al ejecutarlo estara en funcionamiento, básicamente lo que hacemos es crear una función que se ejecuta en el evento onkeyup de JavaScript (Cuando presionamos una tecla teniendo de foco la caja de texto) que se encarga de realizar la búsqueda de nuestra palabra clave recorriendo la tabla dejandonos solo los elementos con coincidencias encontradas.
Espero este ejemplo sea de tu utilidad, hay muchas formas de realizar este cometido, una de ellas es haciendo uso de plugins, si deseas obtener funcionalidades mucho mas completas y potentes puedes revisar este otro post en donde ponemos en practica el plugin DataTable.
Hasta pronto!.
Byspel
hola como le puedo hacer para que en vez de que me oculte la tabla me mande un mensaje
Hola, puedes declarar un parrafo o un div despues de la tabla para mostrar el mensaje
Luego en los condicionales asignar el mensaje así:
(Este iría en el segundo else)
document.getElementById(«mensaje»).innerHTML = «No hay datos»;
y en el primero cuando existen datos para mostrar solo ocultas el mensaje:
document.getElementById(«mensaje»).innerHTML = «»;
Saludos!.
Que buen código, muchísimas gracias, me ayudo muchísimo
Con gusto Ricardo!
como puedo hacer para que NO SE VEA la tabla pero al ingresar un nombre como bill gates aparezca la fila de Bill Gates y su información GRACIAS