Use jQuery to add all the values in a table column

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

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.


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.

Comments (3) -

  • Hi Stan, thanks for sharing this code/tutorial. I actually came to this page through Google, searching for "removing table column" though Smile)) For those who share my faith, here is a little Thanks for the share, yet again.
  • Sam
    This is a great tutorial.
    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.
  • If you want to figure out what number to put in there, you can cycle through the td's on that tr and re-insert numbers for each based upon their index.
Comments are closed