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
Añadiendo el Campo de Búsqueda
Creando la Función de Filtrado
Añadiendo la Función de Filtrado al Evento de Entrada de Texto
Conclusión
Preguntas frecuentes

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

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:

Buscar:

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.