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:

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.