JQuery - ¿Cómo sumar valores de una columna con JQuery?

   
Vista:

¿Cómo sumar valores de una columna con JQuery?

Publicado por Sebastian (3 intervenciones) el 20/08/2016 21:04:18
Hola, este es mi primer mensaje en este foro. Soy bastante novato con lenguajes del lado del cliente pero me gustaría hacer esto con jquery.

Tengo una tabla similar a esta:

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
<table id="cuentas" class="cuentas">
<tr>
   <td><strong>Fecha</strong></td>
  <td><strong>Cliente</strong></td>
  <td><strong>Deuda</strong></td>
  <td><strong>Pago</strong></td>
</tr>
 
 
<tr>
  <td>12/08/2016</td>
  <td>Cliente1</td>
  <td>$<span id="deuda" class="deuda">130.66</span></td>
  <td>$<span id="pago" class="pago">99.77</span></td>
</tr>
 
<tr>
  <td>12/08/2016</td>
  <td>Cliente1</td>
  <td>$<span id="deuda" class="deuda">200.00</span></td>
  <td>$<span id="pago" class="pago">85.99</span></td>
</tr>
 
<tr>
  <td>12/08/2016</td>
  <td>Cliente1</td>
  <td>$<span id="deuda" class="deuda">98.50</span></td>
  <td>$<span id="pago" class="pago">45.00</span></td>
</tr>
 
<tr>
  <td>12/08/2016</td>
  <td>Cliente1</td>
  <td>$<span id="deuda" class="deuda">130.00</span></td>
  <td>$<span id="pago" class="pago">24.66</span></td>
</tr>
 
</table>
<p>Total Deuda: $<span id="totaldeuda" class="totaldeuda">Aqui el total de la deuda</span></p>
<p>Total Deuda: $<span id="totaldeuda" class="totaldeuda">Aqui el total del pago</span></p>
<p>Saldo: $<span id="saldo" class="saldo">Aqui el total deuda - el totalpago</span></p>

Cómo puedo hacer para sumar todos los valores dentro de "<span id="deuda" class="deuda">" (osea quiero sumar 130.66 + 200 + 98.50 + 130.00) y poner el resultado donde dice: "Aqui el total de la deuda"?

Lo mismo para pagos: sumar todos los valores dentro de <span id="pago" class="pago"> y poner el resultado donde dice: "Aqui el total del pago".

Y, como se imaginarán, poner donde dice "Aqui el total deuda - el totalpago" el resultado de deuda - pagos.

Si alguien me puede dar una mano se lo voy a agradecer mucho.

Saludos!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

¿Cómo sumar valores de una columna con JQuery?

Publicado por xve (557 intervenciones) el 20/08/2016 21:44:10
Hola Sebastian, primeramente decirte, que no se deben repetir los id's en una pagina web...

Añade este código al final de tu tabla... te dará el total de la deuda...
1
2
3
4
5
6
7
8
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var totalDeuda=0;
$(".deuda").each(function(){
	totalDeuda+=parseInt($(this).html()) || 0;
});
alert(totalDeuda);
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

¿Cómo sumar valores de una columna con JQuery?

Publicado por Sebastián (3 intervenciones) el 20/08/2016 23:10:54
Hola , muchas gracias por la respuesta!! Funciona muy bien solo que convierte los números en enteros. Hay alguna forma de evitar esto? De nuevo muchas gracias por tu tiempo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

¿Cómo sumar valores de una columna con JQuery?

Publicado por xve (557 intervenciones) el 21/08/2016 07:59:47
Si, puedes cambiar parseInt por parseFloat.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

¿Cómo sumar valores de una columna con JQuery?

Publicado por Sebastian (3 intervenciones) el 21/08/2016 21:59:22
Muchas gracias!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar