Calculate table row with same id in jquery

Question

I am creating an invoice table where I have a table with the same class. I want to calculate the percent of the same row to find out each product's discounted price and display it to test_sum after that calculate the total sum and display it to total_sum. Guys, I need help on this.

<tr>
    <td class="test_charge">50</td>
    <td class="test_discount">10</td>
    <td class="test_sum">Sum:</td>
</tr>
<tr>
    <td class="test_charge">40</td>
    <td class="test_discount">5</td>
    <td class="test_sum">Sum:</td>
</tr>

<tr>
    <td class="total_sum">Total: </td>
</tr>

This is my code which is not working:

var sum = 0.0;
$('.test_sum').each(function()
{
    sum += parseFloat($(this).html());
});
$('.total_sum').html(sum);

sorry for a previous silly mistake where I have used id, I have replaced it with class.

You should use an id just once on a page, since they are meant to be unique. See https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html#answer-31773673 — Kurzyx, Jan 14 '18 at 15:57
IDs have to be unique (otherwise, it's not an identifier, is it, when you think?). You can't use the same ID for more than one element. Use classes for this instead. Anyway there's no code here...where's your attempt? — ADyson, Jan 14 '18 at 16:07

Cem Arguvanlı · Answer 1 · 2018-01-14T16:20:19.090

1

if you use class

var total = 0;

$( "table tr" ).each(function( index ) {
  var found = $( this ).find('.test_charge')
  if(found) { // check for <TR>
   total += parseInt(found.text()) // be sure what you are doing with parseInt    
 }
});

edited Jan 14 '18 at 16:20

answered Jan 14 '18 at 16:13

Cem Arguvanlı

643
10
15

score 1 · Accepted Answer · answered Jan 14 '18 at 16:14

var total = 0;

// For each item calculate the sum and increase the total sum
$('.item').each(function() {
  var $this = $(this),
      charge = Number($this.find('.item-charge').text()),
      discount = Number($this.find('.item-discount').text());

  var sum = charge  - discount;
  $this.find('.item-sum').text("Sum: " + sum);

  total += sum;
});

$('.total-sum').text("Total: " + total);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
  <tr class="item">
      <td class="text-center item-charge">50</td>
      <td class="text-center item-discount">10</td>
      <td class="text-cente item-sum">Sum:</td>
  </tr>
  <tr>
  <tr class="item">
      <td class="text-center item-charge">40</td>
      <td class="text-center item-discount">5</td>
      <td class="text-center item-sum">Sum:</td>
  </tr>
  <tr class="item">
      <td class="text-center item-charge">100</td>
      <td class="text-cente item-discount">10</td>
      <td class="text-center item-sum">Sum:</td>
  </tr>    
  <tr>
      <td colspan="3" class="total-sum">Total: </td>
  </tr>
</tbody>
</table>

Calculate table row with same id in jquery

2 Answers2