Aquí, aprendemos cómo realizar una búsqueda en tiempo real y filtrar en una tabla HTML. Cuando se ingresa una palabra, se buscarán todas las filas de la tabla (excepto el encabezado de la tabla) y se mostrarán las filas que contienen la palabra coincidente. Para esto, podemos usar métodos JQuery.
- filter(): este método se usa para filtrar todos los elementos que no coinciden con los criterios seleccionados y se devolverán esas coincidencias. Reduzca el conjunto de elementos coincidentes a aquellos que coincidan con el selector o pasen la prueba de la función.
- toggle(): este método se utiliza para comprobar la visibilidad de los elementos seleccionados para alternar entre ocultar() y mostrar() para los elementos seleccionados. Mostrar u ocultar los elementos coincidentes.
En el siguiente ejemplo, el valor de búsqueda ingresado en el cuadro de búsqueda se almacena en la variable denominada «valor» y se convierte a minúsculas, ya que estamos realizando una búsqueda que no distingue entre mayúsculas y minúsculas. Después de eso, buscamos en cada fila de la tabla usando la función filter() y mostramos la fila donde se encuentra la string almacenada en la variable «valor». El método toggle() se usa para mostrar las filas que contienen la palabra de búsqueda y ocultar otras. indexOf (value) devuelve -1 si la palabra no se encuentra en la fila.
Ejemplo: El siguiente ejemplo ilustra el uso de la función filter() y toggle() para realizar una búsqueda y filtro en tiempo real en una tabla HTML.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>
perform a real time search and filter
on a HTML table
</h3>
<b>Search the table for Course, Fees or Type:
<input id="gfg" type="text"
placeholder="Search here">
</b>
<br>
<br>
<table>
<tr>
<th>Course</th>
<th>Duration</th>
<th>Type</th>
</tr>
<tbody id="geeks">
<tr>
<td>C++ STL</td>
<td>1499</td>
<td>Online Classes
</td>
</tr>
<tr>
<td>DSA Foundation</td>
<td>7999</td>
<td>Regular Classes</td>
</tr>
<tr>
<td>Geeks Classes</td>
<td>10799</td>
<td>Weekend Classes</td>
</tr>
<tr>
<td>Placement 100</td>
<td>9999</td>
<td>Online Classes</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$("#gfg").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#geeks tr").filter(function() {
$(this).toggle($(this).text()
.toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SnehashishKalamkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA