Cómo filtrar/buscar en una tabla
- Página anterior Filtrar lista
- Página siguiente Filtrar elementos
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 |
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>
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
- Página anterior Filtrar lista
- Página siguiente Filtrar elementos