sum all values for table column on html page

Question

I have a sample table look like this and data refreshed every 5 minute to show latest.example -

TollFree                    US                      Canadian                      
7,312                       826                     141,128

I need to add and calculate total of above all.

 Total Records -

This is what i have tried so far- http://jsfiddle.net/unKDk/2666/

HTML page has 6 tables which has different number of columns to do same calculation. Trying to use same script in all as td class is same.

Woah, that's a ton of non-breaking spaces. Dude, you should look into css padding/margins/etc for styling. — Taplar
– Taplar, Commented Oct 31, 2017 at 14:33
Aside from that, if you put a span element around all the numbers you want to sum with a common class, then it's a simple operation to select all those, parse those into numbers, and then sum them. — Taplar
– Taplar, Commented Oct 31, 2017 at 14:36

Marco Salerno · Accepted Answer · 2017-10-31 14:58:37Z

5

Here we go:

var summ = Number($("td:nth-child(1)").text()) + Number($("td:nth-child(2)").text()) + Number($("td:nth-child(3)").text());
console.log("Result: " + summ);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>V</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

Edit for your request:

var summ = 0;
$("td").each(function() {
  summ += Number($(this).text());
});;
console.log("Result: " + summ);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>V</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

edited Oct 31, 2017 at 14:58

answered Oct 31, 2017 at 14:40

Marco Salerno

5,1912 gold badges14 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sana Over a year ago

Marco, thank you .but above will be like a hard coded for a table with 3 column. I want to use same jq script to add total for any number of column.can you suggest please?

acnn · Accepted Answer · 2017-10-31 15:47:41Z

2

There were a few errors in your code. Here is the working version : http://jsfiddle.net/2q06sv8w/3/

$(document).ready(function () {
            var expenses = $('.expenses');
            var expenseTotal = $('#expenses_sum');
            expenseTotal.html('0');
            $.each(expenses, function (index, object) {
                var boldTag = $(object).find('b');
                if (boldTag && boldTag.length > 0 && $(boldTag[0]).html() != '') {
                    expenseTotal.html(parseInt(expenseTotal.html()) + parseInt($(boldTag[0]).html().replace(/,/g, '')));
                }
            })
        });

The selector '.' is used to select elements matching a class name and '#' is used to select an element matching an id. So 'expenses_sum' must be an id and not a class.
You should use html() and not val() to get and set the content of a td tag.
The td tag contains the value inside a bold tag so you must use the html() on the bold tag.
Declaring global variables and using $ prefix for variables does not look necessary here.

edited Oct 31, 2017 at 15:47

answered Oct 31, 2017 at 14:56

acnn

2261 gold badge2 silver badges6 bronze badges

6 Comments

sana Over a year ago

thanks acnn for such a nice explanation with logic.jsfiddle.net/7vd6bx4k does not works though.

Marco Salerno Over a year ago

I gave you the solution anyway

jvk Over a year ago

@acnn. Hi, i checked your fiddle answer, but comma seperated values are not added

sana Over a year ago

@ Acnn thanks. total should be - 149677 but your update returns 1378.

jvk Over a year ago

@sana, you are wright, the comma seperated values are not adding

|

Collectives™ on Stack Overflow

sum all values for table column on html page

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related