Filtrar tabla HTML con Javascript

tabla html

tabla html

En un articulo anterior tuvimos la oportunidad de ver como eliminar filas de una tabla HTML mediante JavaScript, pues en este articulo veremos un ejemplo sencillo en el cual podremos filtrar datos de una tabla HTML haciendo uso de el mismo lenguaje JavaScript, el resultado de nuestro ejercicio es similar a la imagen expuesta en la cabecera del post, así que sin mas veamos el ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
<h2>Filtrando Tabla HTML con JavaScript</h2>
<form>Busqueda: <input id="txtBusqueda" type="text" onkeyup="Buscar();" /></form>
<table id="tblPersonas">
<tbody>
<tr>
<th>Persona</th>
<th>Empresa</th>
<th>URL</th>
<th>Accción</th>
</tr>
<tr>
<td>Steve Jobs</td>
<td>Apple</td>
<td>https://www.apple.com/</td>
<td><input type="button" value="Eliminar" /></td>
</tr>
<tr class="alt">
<td>Larry Page</td>
<td>Google</td>
<td>https://www.google.com.co</td>
<td><input type="button" value="Eliminar" /></td>
</tr>
<tr>
<td>Peter Thiel</td>
<td>PayPal</td>
<td>https://www.paypal.com</td>
<td><input type="button" value="Eliminar" /></td>
</tr>
<tr class="alt">
<td>Bill Gates</td>
<td>Microsoft</td>
<td>www.microsoft.com</td>
<td><input type="button" value="Eliminar" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript">// < ![CDATA[
function Eliminar (i) {
    document.getElementsByTagName("table")[0].setAttribute("id","tableid");
    document.getElementById("tableid").deleteRow(i);
}
function Buscar() {
            var tabla = document.getElementById('tblPersonas');
            var busqueda = document.getElementById('txtBusqueda').value.toLowerCase();
            var cellsOfRow="";
            var found=false;
            var compareWith="";
            for (var i = 1; i < tabla.rows.length; i++) {
                cellsOfRow = tabla.rows[i].getElementsByTagName('td');
                found = false;
                for (var j = 0; j < cellsOfRow.length && !found; j++) { compareWith = cellsOfRow[j].innerHTML.toLowerCase(); if (busqueda.length == 0 || (compareWith.indexOf(busqueda) > -1))
                    {
                        found = true;
                    }
                }
                if(found)
                {
                    tabla.rows[i].style.display = '';
                } else {
                    tabla.rows[i].style.display = 'none';
                }
            }
        }
// ]]></script>

Puedes copiar el código, pegarlo en algún editor y guardarlo con extensión .html y al ejecutarlo estara en funcionamiento, básicamente lo que hacemos es crear una función que se ejecuta en el evento onkeyup de JavaScript (Cuando presionamos una tecla teniendo de foco la caja de texto) que se encarga de realizar la búsqueda de nuestra palabra clave recorriendo la tabla dejandonos solo los elementos con coincidencias encontradas.

Espero este ejemplo sea de tu utilidad, hay muchas formas de realizar este cometido, una de ellas es haciendo uso de plugins, si deseas obtener funcionalidades mucho mas completas y potentes puedes revisar este otro post en donde ponemos en practica el plugin DataTable.

Hasta pronto!.

¡Suscríbete a mi canal, para acceder a más contenidos gratuitos!

2 comentarios

    • byspel Contestar

      Hola, puedes declarar un parrafo o un div despues de la tabla para mostrar el mensaje

      Luego en los condicionales asignar el mensaje así:
      (Este iría en el segundo else)

      document.getElementById(“mensaje”).innerHTML = “No hay datos”;

      y en el primero cuando existen datos para mostrar solo ocultas el mensaje:

      document.getElementById(“mensaje”).innerHTML = “”;

      Saludos!.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *