Cómo hacer un clasificador / filtro usando HTML, CSS y JavaScript / jQuery

1) Añadir HTML:

————-

Nombre País
Alfreds Futterkiste Alemania
Berglunds snabbkop Suecia
Island Trading Reino Unido
Koniglich Essen Alemania

2) Añadir CSS:

——————–

#myInput {

background-image: url (‘/ css / searchicon.png’); / * Agregar un icono de búsqueda para ingresar * /

posición de fondo: 10px 12px; / * Posiciona el icono de búsqueda * /

repetición de fondo: sin repetición; / * No repita la imagen del icono * /

ancho: 100%; / * Ancho completo * /

tamaño de fuente: 16px; /* Aumenta el tamaño de la fuente */

acolchado: 12px 20px 12px 40px; / * Agregar algo de relleno * /

borde: 1px sólido #ddd; / * Agregar un borde gris * /

margen inferior: 12px; / * Agrega algo de espacio debajo de la entrada * /

}

#mi mesa {

colapso del borde: colapso; / * Contraer bordes * /

ancho: 100%; / * Ancho completo * /

borde: 1px sólido #ddd; / * Agregar un borde gris * /

tamaño de fuente: 18px; /* Aumenta el tamaño de la fuente */

}

#myTable th, #myTable td {

alinear texto: izquierda; / * Texto alineado a la izquierda * /

acolchado: 12px; / * Agregar relleno * /

}

#myTable tr {

/ * Agregar un borde inferior a todas las filas de la tabla * /

borde inferior: 1px sólido #ddd;

}

#myTable tr.header, #myTable tr: hover {

/ * Agregar un color de fondo gris al encabezado de la tabla y al pasar el mouse * /

color de fondo: # f1f1f1;

}

3) Agregar JavaScript:

————————

function myFunction () {

// Declarar variables

entrada var, filtro, tabla, tr, td, i;

input = document.getElementById (“myInput”);

filtro = input.value.toUpperCase ();

table = document.getElementById (“myTable”);

tr = table.getElementsByTagName (“tr”);

// Recorre todas las filas de la tabla y oculta las que no coinciden con la consulta de búsqueda

para (i = 0; i <longitud tr; i ++) {

td = tr [i] .getElementsByTagName (“td”) [0];

si (td) {

if (td.innerHTML.toUpperCase (). indexOf (filtro)> -1) {

tr [i] .style.display = “”;

} más {

tr [i] .style.display = “ninguno”;

}

}

}

}

Los marcos hacen que hacer algo como esto sea pan comido. Personalmente uso angular, pero imagino que a otros les gusta reaccionar o noquear podría hacer el trabajo igual de bien.

Mira en los marcos del lado del cliente. Jquery tiene sus momentos incluso hoy, pero para muchos requisitos web modernos, los marcos hacen que su vida sea MUCHO más fácil.

Esta es una pregunta para StackOverflow, no para Quora.