Reputation: 311

Calculations in JQuery Addition vs. Subtraction

Can anybody help me to alter this JQuery code so that it will do a subtraction calculation rather than addition?

In this current code the first table is just a normal table holding the data, the second table is filled dynamically with jQuery adding up the columns. I am not sure how to accomplish the same functionality only doing subtraction down the column. I tried replacing += by -= and it still add the values but places a minus sign in front of them. For example the age column the values for age are 500, 100, 100 and -700 is returned.

Can anybody lend any insight?

 <html> 
 <head> 
 <script type="text/javascript" SRC="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> 

 </head> 
 <TABLE class=custom id=data> 
 <TBODY> 
 <TR> 
  <TH>name</TH> 
  <TH>age</TH> 
  <TH>weight</TH> 
  <TH>benchpress</TH> 
 </TR> 
 <TR> 
  <TD>stan</TD> 
  <TD>500</TD> 
  <TD>400</TD> 
  <TD>300</TD> 
 </TR> 
 <TR> 
  <TD>rj</TD> 
  <TD>100</TD> 
  <TD>50</TD> 
  <TD>50</TD> 
 </TR> 
 <TR> 
  <TD>jose</TD> 
  <TD>100</TD> 
  <TD>50</TD> 
  <TD>50</TD> 
 </TR> 
</TBODY> 
</TABLE> 
<BR> 
<TABLE class=custom> 
<TBODY> 
<TR> 
 <TH>ages</TH> 
 <TH>weights</TH> 
 <TH>benchpresses</TH> 
</TR> 
<TR> 
 <TD id=ages>&nbsp;</TD> 
 <TD id=weights>&nbsp;</TD> 
 <TD id=benchpresses>&nbsp;</TD> 
</TR> 
</TBODY> 
</TABLE> 
<script type="text/javascript">   

//these will hold the totals 
var ages = 0; 
var weights = 0; 
var benchpresses = 0; 

//reference the rows you want to add 
//this will not include the header row 
var rows = $("#data tr:gt(0)"); 
rows.children("td:nth-child(2)").each(function() { 
//each time we add the cell to the total 
ages -= parseInt($(this).text(),10); 
}); 
rows.children("td:nth-child(3)").each(function() { 
weights -= parseInt($(this).text(),10); 
}); 
rows.children("td:nth-child(4)").each(function() { 
benchpresses -= parseInt($(this).text(),10); 
}); 

//then output them to the elements 
$("#ages").html(ages); 
$("#weights").html(weights); 
$("#benchpresses").html(benchpresses); 

</script> 
</html>

Upvotes: 0

Answers (3)

Hogan

Reputation: 70531

Here is an example of having a starting value and subtracting from that:

http://jsfiddle.net/nq8Nh/

//these will hold the totals 
var ages = 0; 
var weights = 0; 
var benchpresses = 0; 

// first row is starting value. 
var row1 = $("#data tr:eq(1)"); 
ages = parseInt(row1.children("td:nth-child(2)").text());
weights = parseInt(row1.children("td:nth-child(3)").text());
benchpresses = parseInt(row1.children("td:nth-child(4)").text());

 //reference the rows you want to add 
//this will not include the header row or first row 
var rows = $("#data tr:gt(1)"); 
rows.children("td:nth-child(2)").each(function() { 
//each time we add the cell to the total 
ages -= parseInt($(this).text(),10); 
}); 
rows.children("td:nth-child(3)").each(function() { 
weights -= parseInt($(this).text(),10); 
}); 
rows.children("td:nth-child(4)").each(function() { 
benchpresses -= parseInt($(this).text(),10); 
}); 

//then output them to the elements 
$("#ages").html(ages); 
$("#weights").html(weights); 
$("#benchpresses").html(benchpresses);

Upvotes: 2