Seguimos con los retos de Anexsoft, la cual tiene como finalidad pasar un buen rato y aprender entre todos.
Objetivo
- Implementar un algoritmo que permita filtrar las filas de una tabla usando javascript y devertirse. NO HAY FECHA LIMITE.
Instrucciones
Las pautas que debemos considerar son las siguientes:
- Solo se usará javascript, no plugins, no ANGULAR, menos jQuery ¬¬'.
- Cada vez que se ingrese un valor en la caja de texto de nuestra tabla se debe ejecutar un evento para que filtre las filas mostradas.
- El criterio para buscar es similar a un LIKE de SQL %Valor%, es decir todas las cadenas que contengan el termino a buscar.
- Deberna buscar considerando las 4 columnas que tiene la tabla, es decir en los siguientes campos:
- Nombre
- Apellido
- Profesión
- Sueldo
- NOTA: si yo escribo "a", deberá discriminar si esta existe en la columna Nombre, Apellido, Profesión o Sueldo (aunque esta última no aplica, pero de todas formas considerar).
- PROHIBIDO MODIFICAR el HTML.
- Divertirse :)
<table id="tabla" class="table table-striped">
<thead>
<tr>
<th style="width:160px">Nombre</th>
<th>Apellido</th>
<th style="width:220px">Profesion</th>
<th style="width:140px">Sueldo</th>
</tr>
<tr>
<td colspan="4">
<input id="buscar" type="text" class="form-control" placeholder="Escriba algo para filtrar" />
</td>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>Perez Patiño</td>
<td>Marketing Empresarial</td>
<td class="text-right">S/. 9000.00</td>
</tr>
<tr>
<td>Alberto</td>
<td>Gonzales Flores</td>
<td>Derecho</td>
<td class="text-right">S/. 4000.00</td>
</tr>
<tr>
<td>Gustavo</td>
<td>Bueno Bravo</td>
<td>Derecho</td>
<td class="text-right">S/. 7000.00</td>
</tr>
<tr>
<td>Enrique</td>
<td>Pacheco Perez</td>
<td>Derecho</td>
<td class="text-right">S/. 12000.00</td>
</tr>
<tr>
<td>Jaime</td>
<td>Andrade Gonzales</td>
<td>Economia</td>
<td class="text-right">S/. 7500.00</td>
</tr>
<tr>
<td>Andrea</td>
<td>Loayza Perez</td>
<td>Medicina Humana</td>
<td class="text-right">S/. 7500.00</td>
</tr>
<tr>
<td>Elvira</td>
<td>Gonzales Perez</td>
<td>Ingeniería de Sistema</td>
<td class="text-right">S/. 7500.00</td>
</tr>
<tr>
<td>Joseph</td>
<td>Rodriguez Pacheco</td>
<td>Ingeniería de Software</td>
<td class="text-right">S/. 8200.00</td>
</tr>
<tr>
<td>Pedro</td>
<td>kuczynski</td>
<td>Economista</td>
<td class="text-right">S/. 250000.00</td>
</tr>
<tr>
<td>Alan</td>
<td>García Perez</td>
<td>Derecho</td>
<td class="text-right">S/. 120000.00</td>
</tr>
<tr>
<td>Jose</td>
<td>Villanueva Salvador</td>
<td>Medicina Humana</td>
<td class="text-right">S/. 2900.00</td>
</tr>
<tr>
<td>Alberto</td>
<td>Lozano García</td>
<td>Medicina Humana</td>
<td class="text-right">S/. 2900.00</td>
</tr>
</tbody>
</table>
Tips: considerar que la tabla tiene un ID este se llama #tabla y el campo de búsqueda tiene otro ID (#buscar)
¿A dónde mando mi código?
Para enviar tu código debes haber seguido al pie de la letra las instrucciones dadas y dejar un comentario adjutando tu enlace de JSFiddle. Estoy adjuntado al final del POST el JSFiddle base, en este implementa su código javascript, guardan su versión y la adjuntas como comentario.
Personas que han participado:
- Eduardo Rodríguez: como creador del evento les comparto mi código. Primero escondo todas las filas para posteriormente comenzar a reactivar las filas que me interesa usando el método indexOf. https://jsfiddle.net/wd07spq9/6/
- Juan Carlos Jara Loayza: código bastante interesante usando características de ES6 el cual nos lleva a la lección de seguir aprendiendo. https://jsfiddle.net/apw2doma/7
- Victor Lumbre: código sencillo y directo al grano, personalmente me gusta. https://jsfiddle.net/gkL17Lz8
- Luis Vasquez: simple y práctico, directo al grano. Otro código que me gusta. https://jsfiddle.net/lmsardon/v2ewfg9u
- Luis Sardon: a diferencia de los demás, lo que haces es guardar las filas originales en una variable para posteriormente comenzar a filtrar y reemplazar la tabla. https://jsfiddle.net/9zhfjm3o/55
- Nemias: otro código simple y por el cual todos hemos llegado a la misma conclusión. Https://jsfiddle.net/hp9o2n4f