## Use jQuery to add all the values in a table column

08 May 2009

## simple way to get the total for a table

There are a lot of times when a table of data needs to be added up, or a summary provided;
for Asp.Net users specifically, when you are using a dynamic GridView.
Using jQuery, we can do this in just a few lines of code.
If you don't care how it's done, skip to the bottom for a quick function to do the work for you.
Here is a quick example:

The first table is just a normal table holding the data, the second table is filled dynamically with jQuery adding up the columns. Yes, the numbers are real... RJ needs to hit the gym. Here is the jQuery to get these sums the manual way:

First, I grabbed the table and each of it's rows; I also skipped the first row with the :gt() selector; I am grabbing all rows in

Next, I iterate through each cell using children() grabbing the correct index with :nth-child(); one thing I found strange was that though gt() started with a 0-based index, this uses a 1-based index.

Last, using the each() loop, I simply added the cell value to the total, then dumped them out to the cells I had reserved for the totals. All very simple and really only a few lines of jQuery to get it done.

It takes in 3 arguments, and returns the sum of the columns:

The same thing above would be accomplished like this (though this is less efficient as jQuery is selcting the same table 3 times):

As you can see, my function uses integers, so change it if you need to.

name | age | weight | benchpress |
---|---|---|---|

stan | 27 | 177 | 325 |

rj | 30 | 135 | 95 |

jose | 29 | 230 | 375 |

ages | weights | benchpresses |
---|---|---|

86 | 542 | 795 |

The first table is just a normal table holding the data, the second table is filled dynamically with jQuery adding up the columns. Yes, the numbers are real... RJ needs to hit the gym. Here is the jQuery to get these sums the manual way:

//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).html()); }); rows.children("td:nth-child(3)").each(function() { weights += parseInt($(this).html()); }); rows.children("td:nth-child(4)").each(function() { benchpresses += parseInt($(this).html()); }); //then output them to the elements $("#ages").html(ages); $("#weights").html(weights); $("#benchpresses").html(benchpresses);

First, I grabbed the table and each of it's rows; I also skipped the first row with the :gt() selector; I am grabbing all rows in

**#data**(the id of the table with the data in it) greater than index '0' (the header that we don't want to include in the calculation). Also notice that I grabbed**var rows = $("#data tr:gt(0)");**just once since we would be looping through it 3 times, there is no need to call it each time we sum a column; if I were just doing one column, I wouldn't use an extra line to place this into a var.Next, I iterate through each cell using children() grabbing the correct index with :nth-child(); one thing I found strange was that though gt() started with a 0-based index, this uses a 1-based index.

Last, using the each() loop, I simply added the cell value to the total, then dumped them out to the cells I had reserved for the totals. All very simple and really only a few lines of jQuery to get it done.

#### function

If you don't really care how it works and just want a little snippet to get it to work, here you go:function sumOfColumns(tableID, columnIndex, hasHeader) { var tot = 0; $("#" + tableID + " tr" + (hasHeader ? ":gt(0)" : "")) .children("td:nth-child(" + columnIndex + ")") .each(function() { tot += parseInt($(this).html()); }); return tot; }

It takes in 3 arguments, and returns the sum of the columns:

**tableID**[string] id of the table**columnIndex**[int] 1-based column index to sum up**hasHeader**[bool] if the table has a header to exclude

The same thing above would be accomplished like this (though this is less efficient as jQuery is selcting the same table 3 times):

$("#ages").html(sumOfColumns("data", 2, true)); $("#weights").html(sumOfColumns("data", 3, true)); $("#benchpresses").html(sumOfColumns("data", 4, true));

As you can see, my function uses integers, so change it if you need to.

Question: How to add values from two or more tables by using jQuery? Like above, if you have data in different tables. I'm struggling to add the values from different columns in different tables.

Mnay thanks.