Código de JavaScript - Buscar en el contenido de una tabla de HTML con JavaScript

Versión 1
estrellaestrellaestrellaestrellaestrella(51)

Publicado el 19 de Septiembre del 2013gráfica de visualizaciones de la versión: Versión 1
70.168 visualizaciones desde el 19 de Septiembre del 2013

Versión 2 - con mensaje de coincidencias
estrellaestrellaestrellaestrellaestrella(10)

Publicado el 30 de Junio del 2019gráfica de visualizaciones de la versión: Versión 2 - con mensaje de coincidencias
43.829 visualizaciones desde el 30 de Junio del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

En esta segunda versión se añaden los mensajes de las coincidencias encontrados y de "No se han encontrado coincidencias"
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
<head>
    <title>Buscar en el contenido de una tabla</title>
    <meta charset="utf-8">
    <script language="javascript">
        function doSearch()
        {
            const tableReg = document.getElementById('datos');
            const searchText = document.getElementById('searchTerm').value.toLowerCase();
            let total = 0;
 
            // Recorremos todas las filas con contenido de la tabla
            for (let i = 1; i < tableReg.rows.length; i++) {
                // Si el td tiene la clase "noSearch" no se busca en su cntenido
                if (tableReg.rows[i].classList.contains("noSearch")) {
                    continue;
                }
 
                let found = false;
                const cellsOfRow = tableReg.rows[i].getElementsByTagName('td');
                // Recorremos todas las celdas
                for (let j = 0; j < cellsOfRow.length && !found; j++) {
                    const compareWith = cellsOfRow[j].innerHTML.toLowerCase();
                    // Buscamos el texto en el contenido de la celda
                    if (searchText.length == 0 || compareWith.indexOf(searchText) > -1) {
                        found = true;
                        total++;
                    }
                }
                if (found) {
                    tableReg.rows[i].style.display = '';
                } else {
                    // si no ha encontrado ninguna coincidencia, esconde la
                    // fila de la tabla
                    tableReg.rows[i].style.display = 'none';
                }
            }
 
            // mostramos las coincidencias
            const lastTR=tableReg.rows[tableReg.rows.length-1];
            const td=lastTR.querySelector("td");
            lastTR.classList.remove("hide", "red");
            if (searchText == "") {
                lastTR.classList.add("hide");
            } else if (total) {
                td.innerHTML="Se ha encontrado "+total+" coincidencia"+((total>1)?"s":"");
            } else {
                lastTR.classList.add("red");
                td.innerHTML="No se han encontrado coincidencias";
            }
        }
    </script>
 
    <style>
        #datos {border:1px solid #ccc;padding:10px;font-size:1em;}
        #datos tr:nth-child(even) {background:#ccc;}
        #datos td {padding:5px;}
        #datos tr.noSearch {background:White;font-size:0.8em;}
        #datos tr.noSearch td {padding-top:10px;text-align:right;}
        .hide {display:none;}
        .red {color:Red;}
    </style>
</head>
 
<body>
    <h1>Buscar en el contenido de una tabla</h1>
    <form>
        Cadena a buscar <input id="searchTerm" type="text" onkeyup="doSearch()" />
    </form>
    <p>
        <table id="datos">
            <tr>
                <th>id</th><th>Nombre</th><th>Apellidos</th><th>Género</th><th>Edad</th>
            </tr>
            <tr>
                <td>1</td><td>Juan</td><td>Perez</td><td>M</td><td>30</td>
            </tr>
            <tr>
                <td>2</td><td>Jose</td><td>Vazquez</td><td>M</td><td>31</td>
            </tr>
            <tr>
                <td>3</td><td>Luis</td><td>Astorga</td><td>M</td><td>25</td>
            </tr>
            <tr>
                <td>4</td><td>Luisa</td><td>Valdes</td><td>F</td><td>56</td>
            </tr>
            <tr class='noSearch hide'>
                <td colspan="5"></td>
            </tr>
        </table>
    </p>
</body>
</html>



Comentarios sobre la versión: Versión 2 - con mensaje de coincidencias (10)

Sunun
2 de Noviembre del 2019
estrellaestrellaestrellaestrellaestrella
Me sirvió mucho!! Gracias
Responder
Hiroshy
6 de Enero del 2020
estrellaestrellaestrellaestrellaestrella
excelente muchas gracias
Responder
CLEMENTE
21 de Mayo del 2020
estrellaestrellaestrellaestrellaestrella
me sirvio
Responder
Francisco
10 de Septiembre del 2020
estrellaestrellaestrellaestrellaestrella
Excelente!
Responder
Leonardo
25 de Septiembre del 2020
estrellaestrellaestrellaestrellaestrella
de lo mejor, muchas gracias
Responder
Te lo agradezco mucho bro!!
10 de Junio del 2021
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Como hago que los nombres se pongan todos uno al lado del otro?
17 de Julio del 2021
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Teofilo
16 de Noviembre del 2021
estrellaestrellaestrellaestrellaestrella
Excelente me sirvio muchisimo
Responder
Capitana Marvel
26 de Enero del 2022
estrellaestrellaestrellaestrellaestrella
Funciona perfectamente. Los skrull están contentos y os saludan desde la nave nodriza. :-)
Responder
Derid
24 de Junio del 2022
estrellaestrellaestrellaestrellaestrella
Muchas gracias
Responder

Comentar la versión: Versión 2 - con mensaje de coincidencias

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2488