How to get sum of a table column using jQuery

Question

I am working on the below code. Why am I not getting the sum of the .app cells?

var total = 0;
$(".app").each(function() {
  total += parseInt($(this).val());
});

$("#total").html(total);

#total {
  height: 100px;
  width: 100px;
  padding: 15px;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td class="app">50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td class="app">94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td class="app">94</td>
  </tr>
</table>
<br />
<div id="total"></div>

White text on a white background isn't a good idea :)

Andy
– Andy

2016-04-03 02:05:03 +00:00
Commented Apr 3, 2016 at 2:05 — Andy
– Andy, Commented Apr 3, 2016 at 2:05

Sahil · Accepted Answer · 2016-04-03 02:03:33Z

Change parseInt($(this).val()); to parseInt($(this).html()); as the td cells do not have any value attribute and change the color property for total to #000(black), as the output will not be visible.

var total = 0;
$(".app").each(function() {
  total += parseInt($(this).html());
});

$("#total").html(total);

#total {
  height: 100px;
  width: 100px;
  padding: 15px;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td class="app">50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td class="app">94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td class="app">94</td>
  </tr>
</table>
<br />
<div id="total"></div>

Allan Pereira · Accepted Answer · 2016-04-03 02:03:48Z

1

You have to use html():

var total = 0;
$(".app").each(function() {
    total += parseInt($(this).html());
});

$("#total").html(total);

The val() method is used to get value from form elements like inputs and selects. Docs

answered Apr 3, 2016 at 2:03

Allan Pereira

2,5704 gold badges23 silver badges28 bronze badges

Collectives™ on Stack Overflow

How to get sum of a table column using jQuery

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related