How can i sum of multiple numbers with each function in jquery?

Question

I want to sum of multiple numbers but this is unable to work with each function.

What is tried:-

totalPgCost();
function totalPgCost(){
var totalPgCost = 0;
$('.pgBookingTable tr').find('.pgCost').each(function(){
totalPgCost += $(this).val();
});
$('.totalPgCost').text(totalPgCost);
                    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<table class="pgBookingTable">
<tr><td><span class="pgCost">10000</span></td><tr>
<tr><td><span class="pgCost">5000</span></td><tr>
<tr><td>Total <span class="totalPgCost"></span> /-</td><tr>
</table>

Why i'm getting 0?

Answer will appreciated!

brk · Accepted Answer · 2019-05-08 06:41:45Z

You need text not val. Also the html table is not properly balanced, as there was no closing tr. Before adding the convert the string to number

totalPgCost();

function totalPgCost() {
  var totalPgCost = 0;
  $('.pgBookingTable tr').find('.pgCost').each(function() {
    totalPgCost += parseInt($(this).text().trim(), 10);
  });
  $('.totalPgCost').text(totalPgCost);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<table class="pgBookingTable">
  <tr>
    <td><span class="pgCost">10000</span></td>
  </tr>
  <tr>
    <td><span class="pgCost">5000</span></td>
  </tr>
  <tr>
    <td>Total <span class="totalPgCost"></span> /-</td>
  </tr>
</table>

You can also avoid find if you are sure that only span will inside thar table will have that class

totalPgCost();

function totalPgCost() {
  var totalPgCost = 0;
  $('.pgBookingTable .pgCost').each(function() {
    totalPgCost += parseInt($(this).text(), 10);
  });
  $('.totalPgCost').text(totalPgCost);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<table class="pgBookingTable">
  <tr>
    <td><span class="pgCost">10000</span></td>
  </tr>
  <tr>
    <td><span class="pgCost">5000</span></td>
  </tr>
  <tr>
    <td>Total <span class="totalPgCost"></span> /-</td>
  </tr>
</table>

Deepak Singh · Accepted Answer · 2019-05-08 06:36:07Z

2

Use .text

$('.pgBookingTable tr').find('.pgCost').each(function(){
   totalPgCost += parseInt($(this).text());
});

edited May 8, 2019 at 6:36

answered May 8, 2019 at 6:33

Deepak Singh

6501 gold badge9 silver badges26 bronze badges

Comments

Shiva · Accepted Answer · 2019-05-08 06:37:18Z

0

 totalPgCost();
    function totalPgCost(){
    var totalPgCost = 0;
    $('.pgBookingTable tr').find('.pgCost').each(function(){
      totalPgCost += parseInt($(this).text());
    });
    $('.totalPgCost').text(totalPgCost);
                        }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


    <table class="pgBookingTable">
    <tr><td><span class="pgCost">10000</span></td><tr>
    <tr><td><span class="pgCost">5000</span></td><tr>
    <tr><td>Total <span class="totalPgCost"></span> /-</td><tr>
    </table>

answered May 8, 2019 at 6:37

Shiva

5922 gold badges4 silver badges18 bronze badges

Comments

Deepak A · Accepted Answer · 2019-05-08 06:45:47Z

0

you can directly use pgCost for each loop and use text() instead of val() to get the text within span hope this helps

totalPgCost();
function totalPgCost(){
var totalPgCost = 0;
$('.pgCost').each(function(){
totalPgCost += parseInt($(this).text());
});
$('.totalPgCost').text(totalPgCost);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<table class="pgBookingTable">
<tr><td><span class="pgCost">10000</span></td><tr>
<tr><td><span class="pgCost">5000</span></td><tr>
<tr><td>Total <span class="totalPgCost"></span> /-</td><tr>
</table>

answered May 8, 2019 at 6:45

Deepak A

1,6361 gold badge9 silver badges16 bronze badges

Collectives™ on Stack Overflow

How can i sum of multiple numbers with each function in jquery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related