Reto #3: Filtrar una tabla con javascript

El siguiente reto consiste en filtrar los resultados mostrados en una tabla a partir de un criterio de búsqueda.

Rodríguez Patiño, Eduardo
2021-01-21 | 29,150 lecturas

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:

  1. Solo se usará javascript, no plugins, no ANGULAR, menos jQuery ¬¬'.
  2. 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.
    1. El criterio para buscar es similar a un LIKE de SQL %Valor%, es decir todas las cadenas que contengan el termino a buscar.
    2. 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).
  3. PROHIBIDO MODIFICAR el HTML.
  4. 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: