Código de JavaScript - Sumar los valores de una tabla html y mostrar el total

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

Sumar los valores de una tabla html y mostrar el totalgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 27 de Junio del 2018 por Xavi
8.951 visualizaciones desde el 27 de Junio del 2018
En este sencillo código, muestro como multiplicar el precio de los productos por el precio y mostrar el total, obteniendo los datos de una tabla html

calcular-valores-tabla-1

calcular-valores-tabla-2

Versión 1
estrellaestrellaestrellaestrellaestrella(4)

Publicado el 27 de Junio del 2018gráfica de visualizaciones de la versión: Versión 1
8.953 visualizaciones desde el 27 de Junio del 2018
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
<!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 th,#miTabla td  {padding:1px 10px;border:1px solid #aaa;}
	</style>
</head>
 
<body>
 
<h2>Calcular valores de una tabla</h2>
 
<table id="miTabla">
    <thead>
        <tr>
            <th>Producto</th>
            <th>Cantidad</th>
            <th>Importe</th>
            <th> Total </th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan=3>Total</td>
            <td></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>producto A</td>
            <td>2</td>
            <td>12.25</td>
            <td></td>
        </tr>
        <tr>
            <td>producto B</td>
            <td>1</td>
            <td>7.10</td>
            <td></td>
        </tr>
        <tr>
            <td>producto C</td>
            <td>3</td>
            <td>2.20</td>
            <td></td>
        </tr>
    </tbody>
</table>
 
<p>
    <button>Calcular</button>
</p>
 
<script>
// generamos el evento para el boton
document.getElementsByTagName("button")[0].addEventListener("click",calcular);
 
/**
 * funcion que realiza los calculos
 */
function calcular() {
    // obtenemos todas las filas del tbody
    var filas=document.querySelectorAll("#miTabla tbody tr");
 
    var total=0;
 
    // recorremos cada una de las filas
    filas.forEach(function(e) {
 
        // obtenemos las columnas de cada fila
        var columnas=e.querySelectorAll("td");
 
        // obtenemos los valores de la cantidad y importe
        var cantidad=parseFloat(columnas[1].textContent);
        var importe=parseFloat(columnas[2].textContent);
 
        // mostramos el total por fila
        columnas[3].textContent=(cantidad*importe).toFixed(2);
 
        total+=cantidad*importe;
    });
 
    // mostramos la suma total
    var filas=document.querySelectorAll("#miTabla tfoot tr td");
    filas[1].textContent=total.toFixed(2);
}
</script>
 
</body>
</html>



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

Imágen de perfil
30 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
Muy bueno!
Responder
pablo
4 de Abril del 2019
estrellaestrellaestrellaestrellaestrella
Simplemente muchas gracias
Responder
Imágen de perfil
23 de Abril del 2019
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Ivan
25 de Agosto del 2019
estrellaestrellaestrellaestrellaestrella
Ok ya vi tu respuesta... Es una operación horizontal, quiero hacer algo como en Excel, dnd la suma de 3 filas las muestro en una celda combinada q abarca esas 3 filas
Responder

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