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

Imágen de perfil
Val: 2.194
Oro
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

estrellaestrellaestrellaestrellaestrella(51)
Actualizado el 30 de Junio del 2019 por Xavi (Publicado el 19 de Septiembre del 2013)
76.012 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
68.746 visualizaciones desde el 19 de Septiembre del 2013

Versión 2 - con mensaje de coincidencias

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


No hay comentarios
 

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

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2488