Reto #3: Filtrar una tabla con javascript

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:

• 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