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

Imágen de perfil
Val: 1.954
Plata
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

Publicado el 27 de Junio del 2018 por Xavi (541 códigos)
22.117 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(5)

Publicado el 27 de Junio del 2018gráfica de visualizaciones de la versión: Versión 1
22.118 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 (5)

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
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
Santos
26 de Noviembre del 2019
estrellaestrellaestrellaestrellaestrella
Busco algo similar pero tal vez the answer my friend is blowing in the wind
Responder

Comentar la versión: Versión 1

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