I have this sample code:

<table>
    <tr>
        <td class="price">1</td>
    </tr>
    <tr>
        <td class="price">4</td>
    </tr>
    <tr>
        <td class="price">6</td>
    </tr>
</table>
                   <p id="setTotal"> </p>

I want to get the total of those values under class "price" however my output goes something like:

1 4 6 Sum is 0[object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement].

My JavaScript code is:

var arr = [];
var totalPrice = 0;
var i;

$("td.price").each(function(){

arr.push($(this).text());
    totalPrice += this;
    document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";
});

I have this sample code:

<table>
    <tr>
        <td class="price">1</td>
    </tr>
    <tr>
        <td class="price">4</td>
    </tr>
    <tr>
        <td class="price">6</td>
    </tr>
</table>
                   <p id="setTotal"> </p>

I want to get the total of those values under class "price" however my output goes something like:

1 4 6 Sum is 0[object HTMLTableCellElement][object HTMLTableCellElement][object HTMLTableCellElement].

My JavaScript code is:

var arr = [];
var totalPrice = 0;
var i;

$("td.price").each(function(){

arr.push($(this).text());
    totalPrice += this;
    document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";
});

• javascript
• jquery
• arrays
• html-table

• Do you need it in array, or string output is ok? You are trying both ways, as i can see? – sinisake Commented Sep 21, 2015 at 15:32

6 Answers 6

You need to get the text from the td and parse it as a number.

fiddle:http://jsfiddle/4rwbyx3n/

var arr = [];
var totalPrice = 0;
var i;

$("td.price").each(function(){

arr.push($(this).text());

    var price = $(this).text();
    totalPrice += Number(price);
    document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";
});

You have two issues:

1. You're incrementing totalPrice by this, which is an HTML element.
2. You are not converting the string value from the HTML into an integer.

Here are the changes, with some minor improvements/suggestions:

var totalPrice = 0;
$("td.price").each(function(i, td) {
    totalPrice += parseInt($(td).text());
});
$('#setTotal').html("Sum is " + totalPrice + ".");

Try:

$("td.price").each(function(){

 arr.push($(this).text());
 totalPrice += (+$(this).text());
 document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";

});

The reason for your earlier result is you were concatenating HTML elements, not the text in it.

something like this:

With javascript's array.map you can transform an array of something, into something else.

In this case, an array of html elements into an array of numbers.

using reduceRight on the result with a simple add function as a parameter, each element of the array is accumulated and summed one by one.

we need to wrap it in jQuery.makeArray, since jQuery $(selector).map will return a jQuery object, and we want a native javascript array.

var sum = jQuery.makeArray($("td.price").map(function(idx, num) { 
      return parseInt($(num).text()); 
}).reduceRight(function(a,b){return a+b;}));

and then

document.getElementById("setTotal").innerHTML = "Sum is "+sum+ ".";

or with jquery

$("#setTotal").text("Sum is " + sum + ".");

you have to parseFloat the text of the element. and you also need jquery for what youre doing with the .each() function

var totalPrice = 0;

$("td.price").each(function(){
  totalPrice += parseFloat($(this).text());
  document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td class="price">1</td>
    </tr>
    <tr>
        <td class="price">4</td>
    </tr>
    <tr>
        <td class="price">6</td>
    </tr>
</table>
<p id="setTotal"> </p>

You are pushing html elements/objects to your sum, not sure why, and since you are already using jQuery, no need for native JS selectors and methods:

var totalPrice = 0;


$("td.price").each(function(){


    totalPrice +=parseInt($(this).text());

}); 
$("#setTotal").html("Sum is "+totalPrice+ ".");

Also, you can move price showing from each() loop, no need for updates inside loop...

http://jsfiddle/216fouoy/