Cómo filtrar la tabla en JavaScript

Al crear una gran tabla HTML en la página, es importante incluir una funcionalidad de filtro para una mejor experiencia de usuario. Para hacer esto, use JavaScript para filtrar registros en una tabla buscando cualquier registro de tabla en un cuadro de búsqueda. Además, el código JavaScript proporciona menos líneas de código para funcionar de manera eficiente.

Esta publicación de blog definirá el proceso de filtrar la tabla en JavaScript.

Cómo filtrar la tabla en JavaScript?

Veamos un ejemplo explicando cómo filtrar una tabla en JavaScript.

Ejemplo
Primero, cree una barra de búsqueda en un documento HTML con el "OnKeyUp"Propiedad que llame al"FilterTableFunc ()"Cuando se lanza la clave:

Crear una tabla que almacene los datos de los empleados utilizando el

etiqueta y asignar una identificación "Empleado de empleo":

Nombre	Correo electrónico	Género	Designación	Dia de ingreso
John	[email protected]	Masculino	CPA	5/5/2020
Stephen	[email protected]	Masculino	HRM	21/10/2020
Mari	[email protected]	Femenino	HRM	16/05/2022
Rhonda	[email protected]	Masculino	CFA	23/06/2022

Después de ejecutar el archivo HTML, la salida se verá así:

Después de eso, agregemos funcionalidad a la tabla de filtro. En un archivo de script de JavaScript o una etiqueta, use el código a continuación que filtrará los datos de la tabla en función de la búsqueda:

function filtreTableFunc ()
var filtroResult = documento.getElementById ("búsqueda").valor.tolowercase ();
var vacío = documento.getElementById ("Employeedata");
var tr = vacío.getElementsBytagName ("tr");
para (var i = 1; i < tr.length; i++)
tr [i].estilo.display = "Ninguno";
const tdarray = tr [i].getElementsBytagName ("TD");
para (var j = 0; j -1)
tr [i].estilo.display = "";
romper;

En el código anterior:

• Primero, defina una función "FilterTableFunc ()".
• Acceda a la barra de búsqueda usando su identificación "buscar"Para obtener el valor ingresado y convertirlo en una minúscula utilizando el"tolowercase ()" método.
• Obtenga una referencia a la tabla donde se realizará la operación del filtro utilizando su ID "Empleado de empleo".
• Luego, obtenga las filas de la mesa usando el "GetElementsByTagName" método.
• Iterar a través de 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í, muestralo.

Producción

La salida anterior indica que la operación del filtro se ha aplicado correctamente a la tabla.

Conclusión

Se puede filtrar una tabla 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 que se requiere un evento específico. Este enfoque funcionará de tal manera que en los datos idénticos ingresados, los datos correspondientes de la tabla se obtienen, independientemente de la sensibilidad de los casos en el campo de texto de entrada. Esta publicación describe un enfoque que se puede utilizar para filtrar una tabla en JavaScript.