Cómo Filtrar una Tabla en JavaScript
Si tienes una tabla con muchas filas y quieres ayudar al usuario a encontrar información específica, ¡la filtración de la tabla puede ser la solución! La filtración de la tabla es un proceso que te permite buscar y mostrar solo las filas que coinciden con ciertos criterios de búsqueda. En este artículo, te mostraremos cómo puedes filtrar una tabla en JavaScript.
📋 Aquí podrás encontrar✍
Creando la Tabla
Lo primero que debemos hacer es crear la tabla en HTML. Aquí te dejamos un ejemplo básico de código HTML de una tabla:
| Nombre | Edad | País |
|---|---|---|
| Carlos | 20 | México |
| Samantha | 30 | Estados Unidos |
| Ricardo | 25 | Argentina |
Añadiendo el Campo de Búsqueda
Para añadir el campo de búsqueda es necesaria la utilización de una entrada de texto (<input type="text">). Aquí te mostramos cómo puedes implementarlo:
Creando la Función de Filtrado
Para filtrar una tabla en JavaScript, necesitamos crear una función que maneje el evento de entrada de texto y que muestre solo las filas que coinciden con el texto de búsqueda. Aquí te mostramos cómo crear la función:
function filtrarTabla() {
// Obtenemos el texto de búsqueda
var searchText = document.getElementById("inputSearch").value.toUpperCase();
// Obtenemos la tabla
var table = document.getElementsByTagName("table")[0];
// Obtenemos las filas de la tabla
var rows = table.getElementsByTagName("tr");
// Recorremos todas las filas
for (var i = 0; i < rows.length; i++) {
var currentRow = rows[i];
// Obtenemos las celdas de la fila
var cells = currentRow.getElementsByTagName("td");
// Creamos una variable para ver si hay una coincidencia
var found = false;
// Recorremos todas las celdas
for (var j = 0; j < cells.length; j++) {
var currentCell = cells[j];
// Comparamos el texto de la celda con el texto de búsqueda
if (currentCell.innerHTML.toUpperCase().indexOf(searchText) > -1) {
found = true;
break;
}
}
// Mostramos u ocultamos la fila dependiendo si hay una coincidencia
if (found) {
currentRow.style.display = "";
} else {
currentRow.style.display = "none";
}
}
}
Añadiendo la Función de Filtrado al Evento de Entrada de Texto
Una vez que tenemos la función creada, necesitamos añadirla al evento de entrada de texto del campo de búsqueda para que se ejecute cada vez que se escriba algo. Aquí te mostramos cómo puedes añadirlo:
document.getElementById("inputSearch").addEventListener("input", filtrarTabla);
Conclusión
La filtración de la tabla en JavaScript es una forma sencilla de ayudar al usuario a encontrar la información que necesita en una tabla. Con sólo unas pocas líneas de código, puedes mejorar significativamente la experiencia del usuario. Te recomendamos experimentar con diferentes estilos de búsqueda y agregar la filtración de la tabla a tus proyectos.
Preguntas frecuentes
¿Puedo filtrar una tabla con jQuery?
Sí, puedes filtrar una tabla con jQuery utilizando el método .filter(). Este método te permite filtrar un conjunto de elementos HTML basados en un criterio de búsqueda.
¿Cómo puedo aplicar el filtrado de la tabla a una tabla que se carga dinámicamente?
Si la tabla se carga dinámicamente, necesitarás volver a ejecutar la función de filtrado cada vez que la tabla cambie. Puedes hacer esto utilizando callbacks o eventos personalizados.
¿Puedo aplicar el filtrado de la tabla a varias tablas en la misma página?
Sí, puedes aplicar el filtrado de la tabla a varias tablas en la misma página utilizando selectores de CSS para apuntar a las diferentes tablas.
¿Hay alguna limitación en el número de filas que puedo filtrar?
No, no hay una limitación establecida en el número de filas que puedes filtrar. Sin embargo, tener un gran número de filas puede afectar el rendimiento. Si estás manipulando grandes conjuntos de datos, te recomendamos considerar paginación o carga dinámica para mejorar la experiencia del usuario.
Subir
Deja una respuesta