Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Reto #3: Filtrar una tabla con javascript
Actualizado el 04 Febrero, 2017 y leído 7,635 veces
Calificación: 9.33 / 10

Reto #3: Filtrar una tabla con javascript

Anexsoft

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.
    Enlacehttps://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/

 

 

¡Adquiera ya!

  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.