Código de JavaScript - Sumar las filas y columnas de una tabla

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

Sumar las filas y columnas de una tablagráfica de visualizaciones


JavaScript

Publicado el 10 de Septiembre del 2019 por xve
234 visualizaciones desde el 10 de Septiembre del 2019
Este código es una modificación del código: http://lwp-l.com/s4677 en el que muestro como sumar las filas y las columnas de una tabla con JavaScript.

sumar-tabla-javascript-1

sumar-tabla-javascript-2

Versión 1

Publicado el 10 de Septiembre del 2019gráfica de visualizaciones de la versión: Versión 1
234 visualizaciones desde el 10 de Septiembre 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
	#miTabla tbody td {text-align:right;}
	#miTabla tbody td:nth-child(1) {text-align:left;}
	#miTabla tfoot td {text-align:right;font-weight:bold;}
	#miTabla tfoot td:nth-child(1) {text-align:left;}
	#miTabla th,#miTabla td  {padding:1px 10px;border:1px solid #aaa;}
    #miTabla td:last-child {font-weight:bold;}
	</style>
</head>
 
<body>
 
<h2>Sumar valores horizontales y verticales de una tabla</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>
            <th>Total</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Total</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>producto A</td>
            <td>20.00</td>
            <td>12.25</td>
            <td>17.50</td>
            <td>3.25</td>
            <td></td>
        </tr>
        <tr>
            <td>producto B</td>
            <td>14.00</td>
            <td>7.10</td>
            <td>23.00</td>
            <td>10.50</td>
            <td></td>
        </tr>
        <tr>
            <td>producto C</td>
            <td>3.10</td>
            <td>2.20</td>
            <td>6.00</td>
            <td>4.30</td>
            <td></td>
        </tr>
    </tbody>
</table>
 
<p>
    <button>Calcular</button>
</p>
 
<script>
// generamos el evento para el boton
document.querySelector("button").addEventListener("click",calcular);
 
/**
 * funcion que realiza los calculos
 */
function calcular() {
 
    /** sumamos las filas **/
 
    // obtenemos todas las filas del tbody
    const filas=document.querySelectorAll("#miTabla tbody tr");
 
    // bucle por cada una de las filas
    filas.forEach((fila) => {
 
        // obtenemos los tds de cada fila
        const tds=fila.querySelectorAll("td");
 
        let total=0;
 
        // bucle por cada uno de los tds con excepcion el primero (producto) y ultimo (total)
        for(let i=1; i<tds.length-1; i++) {
 
            // sumamos los tds
            total+=parseFloat(tds[i].innerHTML);
        }
 
        // mostramos el total en la ultima casilla
        tds[tds.length-1].innerHTML=total.toFixed(2);
    });
 
 
    /** sumamos las columnas **/
 
    // obtenemos el numero de columnas
    const columnas=document.querySelectorAll("#miTabla thead tr th");
 
    // obtenemos las fila de los totales
    const totalFila=document.querySelectorAll("#miTabla tfoot tr td");
 
    // bucle por cada una de las columnas excepto la primera
    for(let i=1; i<columnas.length; i++) {
        let total=0;
 
        // obtenemos el valor de cada una de las filas
        filas.forEach((fila) => {
            total+=parseFloat(fila.querySelectorAll("td")[i].innerHTML);
        });
 
        // mostramos el total en la ultima fila
        totalFila[i].innerHTML=total.toFixed(2);
    }
 
}
</script>
 
</body>
</html>



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


No hay comentarios
 

Comentar la versión: Versión 1

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/s5522
Revisar política de publicidad