Código de JavaScript - Sumar las filas de una columna al pulsar sobre el titulo de la misma

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

Sumar las filas de una columna al pulsar sobre el titulo de la mismagráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 5 de Noviembre del 2019 por xve
503 visualizaciones desde el 5 de Noviembre del 2019
Este código muestra como sumar los valores de una columna dada cuando se pulsa el ratón encima de uno de los títulos de las columnas.

sumar-columna-pulsado-raton

Versión 1.0
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 5 de Noviembre del 2019gráfica de visualizaciones de la versión: Versión 1.0
504 visualizaciones desde el 5 de Noviembre del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    #miTabla th:not(:first-child) {cursor:pointer;}
    #miTabla tbody td:not(:first-child) {text-align:right;}
    #miTabla th,#miTabla td  {padding:1px 10px;border:1px solid #aaa;}
    </style>
</head>
 
<body>
 
<h2>Pulsa sobre la columna para obtener la suma</h2>
 
<table id="miTabla">
    <thead>
        <tr>
            <th>Producto</th>
            <th>Ventas<br> 1 trimestre</th>
            <th>Ventas<br> 2 trimestre</th>
            <th>Ventas<br> 3 trimestre</th>
            <th>Ventas<br> 4 trimestre</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>producto A</td>
            <td>20.00</td>
            <td>12.25</td>
            <td>17.50</td>
            <td>3.25</td>
        </tr>
        <tr>
            <td>producto B</td>
            <td>14.00</td>
            <td>7.10</td>
            <td>23.00</td>
            <td>10.50</td>
        </tr>
        <tr>
            <td>producto C</td>
            <td>3.10</td>
            <td>2.20</td>
            <td>6.00</td>
            <td>4.30</td>
        </tr>
    </tbody>
</table>
 
<h4 id="resultado"></h4>
 
<script>
const thead=document.querySelectorAll("#miTabla thead th");
 
// creamos el evento click en cada columna
thead.forEach(el => {
    el.addEventListener("click", sumarColumna)
});
 
function sumarColumna(e) {
    if (this.cellIndex>0) {
        const tbody=document.querySelectorAll("#miTabla tbody tr");
        let total=0;
        tbody.forEach(el => {
            let td=el.querySelectorAll("td");
            if (parseFloat(td[this.cellIndex].textContent)>0) {
                total+=parseFloat(td[this.cellIndex].textContent);
            }
        });
 
        document.getElementById("resultado").innerHTML="La suma de la fila '"+this.textContent+"' es: "+total;
    }
}
</script>
 
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (1)

Imágen de perfil
6 de Noviembre del 2019
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1.0

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/s5629