Cómo filtrar/buscar en una tabla

Aprende a usar JavaScript para crear tablas filtrables.

Filtrar tabla

Cómo usar JavaScript para buscar datos específicos en una tabla.

Name Country
Alfreds Futterkiste Germany
Berglunds snabbkop Suecia
Island Trading UK
Koniglich Essen Germany
Laughing Bacchus Winecellars Canada
Magazzini Alimentari Riuniti Italy
North/South UK
Paris specialites France

pruébelo usted mismo

Crear una tabla filtrable

Primer paso - Añadir HTML:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Buscar nombres...">
<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
</table>

Segundo paso - Añadir CSS:

Establecer los estilos de los elementos de entrada y la tabla:

#myInput {
  background-image: url('/css/searchicon.png'); /* Añadir icono de búsqueda en el cuadro de entrada */
  background-position: 10px 12px; /* Posicionar el icono de búsqueda */
  background-repeat: no-repeat; /* No repetir la imagen del icono */
  width: 100%; /* Ancho completo */
  font-size: 16px; /* Aumentar el tamaño de la fuente */
  padding: 12px 20px 12px 40px; /* Añadir algo de relleno interno */
  border: 1px solid #ddd; /* Agregar borde gris sólido */
  margin-bottom: 12px; /* Añadir algo de espacio debajo del cuadro de entrada */
}
#myTable {
  border-collapse: collapse; /* Combinar bordes */
  width: 100%; /* Ancho completo */
  border: 1px solid #ddd; /* Agregar borde gris sólido */
  font-size: 18px; /* Aumentar el tamaño de la fuente */
}
#myTable th, #myTable td {
  text-align: left; /* Alinear texto a la izquierda */
  padding: 12px; /* Añadir márgenes internos */
}
#myTable tr {
  /* Añadir borde inferior a todas las filas de la tabla */
  border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
  /* Añadir color de fondo gris para la cabecera de la tabla y al pasar el ratón */
  background-color: #f1f1f1;
}

Tercero - Añadir JavaScript:

<script>
function myFunction() {
  // Declaración de variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  // Recorrer todas las filas de la tabla y ocultar las filas que no coinciden con la consulta de búsqueda
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

pruébelo usted mismo

Consejo:Si desea realizar una búsqueda sensible a mayúsculas y minúsculas, elimine toUpperCase().

Consejo:Si desea buscar el país (índice 1) en lugar de "Nombre" (índice 0), por favor tr[i].getElementsByTagName('td')[0] Cambiar a [1].

Páginas relacionadas

Tutoriales:¿Cómo filtrar/buscar lista