CODEWITHSUNDEEP
javascriptjquery
tpodkowski
tpodkowski

Reputation: 3

Adding specified element from many rows JavaScript/jQuery

I've got table structure like this:

<table>
<tbody>
    <tr>
        <td></td>
        <td></td>
        <td class="price"></td>
         (...)
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td class="price"></td>
         (...)
        <td></td>
    </tr>
    (...)
    <tr>
        <td></td>
        <td></td>
        <td class="price"></td>
         (...)
        <td></td>
    </tr>       
</tbody>

I just want to pull every td price value and sum it up. At the end i just need an variable with total value.

Upvotes: 0

Views: 27

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

Using map() and reducing it to the sum:

var sum = $('td.price').map(function () {
    return parseInt(this.innerHTML, 10)
}).get().reduce(function (a, b) {
    return a + b;
});


var sum = $('td.price').map(function () {
    return parseInt(this.innerHTML, 10);
}).get().reduce(function (a, b) {
    return a + b;
});

console.log(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
    <tr>
        <td></td>
        <td></td>
        <td class="price">5</td>
         (...)
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td class="price">10</td>
         (...)
        <td></td>
    </tr>
    (...)
    <tr>
        <td></td>
        <td></td>
        <td class="price">20</td>
         (...)
        <td></td>
    </tr>       
</tbody>
  <table>

Upvotes: 1

AmmarCSE
AmmarCSE

Reputation: 30557

Use jQuery each() to iterate over the td elements and make sure you use parseInt to avoid concatenating strings rather than summing

var sum = 0;
$('td.price').each(function(){
sum += parseInt($(this).text());
});
document.write('Sum is ' + sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
    <tr>
        <td></td>
        <td></td>
        <td class="price">5</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td class="price">10</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td class="price">20</td>
        <td></td>
    </tr>       
</tbody>
  <table>

Upvotes: 0

Related Questions