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

Imágen de perfil
Val: 1.968
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Buscar en el contenido de una tabla de HTML con JavaScriptgráfica de visualizaciones


JavaScript

Actualizado el 30 de Junio del 2019 por Xavi (542 códigos) (Publicado el 19 de Septiembre del 2013)
97.747 visualizaciones desde el 19 de Septiembre del 2013
Código que muestra como realizar una búsqueda dentro de una <tabla> de html con Javascript.
Este ejemplo ha sido sacado del foro de JavaScript de esta página.

buscar-en-tabla-javascript

no-coincidencias

dos-coincidencias

Versión 1
estrellaestrellaestrellaestrellaestrella(51)

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

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

Publicado el 30 de Junio del 2019gráfica de visualizaciones de la versión: Versión 2 - con mensaje de coincidencias
28.461 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 (5)

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

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