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 Patiño
  Como creador del evento les comparto mi código. Lo que hice fue basicamente crear un algoritmo que busque el criterio de búsqueda en cada celda, para esto use la función indexOf, por defecto escondo las filas usando display:none y las que cumplan con el criterio las vuelvo a mostrar.
  Enlace: https://jsfiddle.net/wd07spq9/6/
• Juan Carlos Jara Loayza
  Interesante tu código, hay muchas que tengo que aprender de javascript.
  Enlace: https://jsfiddle.net/apw2doma/7/
• Victor Lumbre
  Buen código, bastate simple de comprender.
  Enlace: https://jsfiddle.net/gkL17Lz8/
• Alexis Cabrera
  Interesante la lógica, todos hemos llegado a la misma conclusión yendo por diferentes caminos.
  Enlace: https://jsfiddle.net/nzkoLavx/8/
• Luis Vasquez
  Excelente participación, un código bastante simple y práctico de entender.
  https://jsfiddle.net/v2ewfg9u/