Esta publicación de blog definirá el proceso de filtrado de la tabla en JavaScript.
¿Cómo filtrar la tabla en JavaScript?
Veamos un ejemplo que explica cómo filtrar una tabla en JavaScript.
Ejemplo
Primero, cree una barra de búsqueda en un documento HTML con el ' encendido ” propiedad que llaman el “ filterTableFunc() ” cuando se suelta la tecla:
< tipo de entrada = 'texto' identificación = 'búsqueda' encendido = 'filterTableFunc ()' marcador de posición = 'Búsqueda.....' >< hermano >< hermano >
Cree una tabla que almacene datos de empleados usando el
< identificación de la tabla = 'datosdelempleado' borde = '1' >
< tr >
< el > Nombre el >
< el > Correo electrónico el >
< el > Género el >
< el > Designacion el >
< el > Dia de ingreso el >
tr >
< tr >
< td > John td >
< td > Juan @ gmail. con td >
< td > Masculino td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > Esteban td >
< td > esteban @ gmail. con td >
< td > Masculino td >
< td > gestión de recursos humanos td >
< td > 21 / 10 / 2020 td >
tr >
< tr >
< td > Grande td >
< td > mari78 @ gmail. con td >
< td > Femenino td >
< td > gestión de recursos humanos td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > ronda td >
< td > ronda12 @ correo caliente con td >
< td > Masculino td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
mesa >
Después de ejecutar el archivo HTML, la salida se verá así:
Después de eso, agreguemos funcionalidad a la tabla de filtros. En un archivo de secuencia de comandos de JavaScript o una etiqueta, use el siguiente código que filtrará los datos de la tabla según la búsqueda:
función filterTableFunc ( ) {
estaba filtroResultado = documento. getElementById ( 'búsqueda' ) . valor . aLowerCase ( ) ;
estaba EmpTable = documento. getElementById ( 'datosdelempleado' ) ;
estaba tr = EmpTable. getElementsByTagName ( 'tr' ) ;
por ( estaba i = 1 ; i < tr. longitud ; i ++ ) {
tr [ i ] . estilo . monitor = 'ninguna' ;
constante tdArray = tr [ i ] . getElementsByTagName ( 'td' ) ;
por ( estaba j = 0 ; j - 1 ) {
tr [ i ] . estilo . monitor = '' ;
descanso ;
}
}
}
}
En el código anterior:
- Primero, defina una función “ filterTableFunc() ”.
- Accede a la barra de búsqueda usando su id “ búsqueda ” para obtener el valor ingresado y convertirlo a minúsculas usando el “ aLowerCase() ' método.
- Obtenga una referencia a la tabla donde se realizará la operación de filtro utilizando su id ' empleadoDatos ”.
- Luego, obtenga las filas de la tabla usando el ' getElementsByTagName ' método.
- Recorra la tabla hasta su longitud, obtenga los datos para cada entrada de la tabla y verifique si el valor almacenado de la tabla es igual al valor buscado. Si es así, muéstralo.
Producción
El resultado anterior indica que la operación de filtro se ha aplicado con éxito a la tabla.
Conclusión
Una tabla se puede filtrar en JavaScript iterando a través de los datos de la tabla y devolviendo los datos relevantes. Este filtrado se realiza a través de una función llamada sobre un evento específico. Este enfoque funcionará de tal manera que en datos idénticos ingresados, se obtienen los datos correspondientes de la tabla, independientemente de la distinción entre mayúsculas y minúsculas en el campo de texto de entrada. Esta publicación describe un enfoque que se puede usar para filtrar una tabla en JavaScript.