How to calculate dynamic table each row total

Question

I am trying to show the transaction statement and in that,I am adding the credit amount of each table tr and trying to show in balance column and in case of debit deduct from balance and show in the balance column but when I am trying to achieve these its showing balance as infinity. Please see my snippet and tell me what I am doing wrong.

$(document).ready(function() {

$('#cbtn-selectors tr').each(function() {
    var cr = Number(parseFloat($('.cr').text()));        
    var dr = Number(parseFloat($('.br').text()));             
    if (!isNaN(cr) && cr.length !== 0) {
        sum = Number(parseFloat($('.total').text()));
        sum = sum + cr;
    } else {
        sum = Number($('.total').text());
        sum = sum - dr;
    }
    $('.total').html(sum);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cbtn-selectors" class="table table-striped table-bordered nowrap">
    <thead>
        <tr>
            <th>Contest name</th>
            <th>Type</th>
            <th>Cr amount</th>
            <th>Dr amount</th>
            <th>Balance</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> new test contest</td>
            <td>cr</td>
            <td class="cr"> 500 .00 </td>
            <td class="dr"> 0.00 </td>
            <td class="total">0.00</td>
            <td>27th Dec 2018</td>
        </tr>
        <tr>
            <td> new test contest</td>
            <td>dr</td>
            <td class="cr"> 0.00 </td>
            <td class="dr"> 500 .00 </td>
            <td class="total">0.00</td>
            <td>01st Jan 1970</td>
        </tr>
        <tr>
            <td> new test contest</td>
            <td>cr</td>
            <td class="cr"> 500 .00 </td>
            <td class="dr"> 0.00 </td>
            <td class="total">0.00</td>
            <td>28th Dec 2018</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th>Total:-<span class="crt"> </span></th>
            <th>Total:-<span class="drt"> </span></th>
            <th>Total:-<span class="collectedt"> </span></th>
            <th></th>

        </tr>
    </tfoot>
</table>

Answer 1

Couple of things:

• Typo in $('.br'), it should be $('.dr')
• You are not passing context while selecting elements hence first element matching class will be selected. In jQuery selector, second argument could be passed as context hence selection of the element will be from the provided context.

$(document).ready(function() {

  $('#cbtn-selectors tr').each(function() {
    var cr = Number(parseFloat($('.cr', this).text()));
    var dr = Number(parseFloat($('.dr', this).text()));
    if (!isNaN(cr) && cr.length !== 0) {
      sum = Number(parseFloat($('.total', this).text()));
      sum = sum + cr;
    } else {
      sum = Number($('.total', this).text());
      sum = sum - dr;
    }
    $('.total', this).html(sum);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<table id="cbtn-selectors" class="table table-striped table-bordered nowrap">
  <thead>
    <tr>
      <th>Contest name</th>
      <th>Type</th>
      <th>Cr amount</th>
      <th>Dr amount</th>
      <th>Balance</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> new test contest</td>
      <td>cr</td>
      <td class="cr"> 500 .00 </td>
      <td class="dr"> 0.00 </td>
      <td class="total">0.00</td>
      <td>27th Dec 2018</td>
    </tr>
    <tr>
      <td> new test contest</td>
      <td>dr</td>
      <td class="cr"> 0.00 </td>
      <td class="dr"> 500 .00 </td>
      <td class="total">0.00</td>
      <td>01st Jan 1970</td>
    </tr>
    <tr>
      <td> new test contest</td>
      <td>cr</td>
      <td class="cr"> 500 .00 </td>
      <td class="dr"> 0.00 </td>
      <td class="total">0.00</td>
      <td>28th Dec 2018</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th>Total:-<span class="crt"> </span></th>
      <th>Total:-<span class="drt"> </span></th>
      <th>Total:-<span class="collectedt"> </span></th>
      <th></th>

    </tr>
  </tfoot>
</table>

Answer 2

finally, I figured out here is the answer it might help someone

$(document).ready(function() {

 $('#cbtn-selectors tr').each(function(){
                var cr = Number(parseFloat($('.cr', this).text()));
                var dr = Number(parseFloat($('.dr', this).text()));
                var sum = $(this).closest('tr').prev('tr').find('.total', this).text();
               
                var total;
                if (cr !== 0) {
                    sum=Number(sum);
                    total = sum + cr;

                } else {
                    sum=Number(sum);
                    total = sum - dr;
                    //console.log(total);
                }
                $('.total', this).html(total);
            });
});

.total{
  color: green;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cbtn-selectors" class="table table-striped table-bordered nowrap">
    <thead>
        <tr>
            <th>Contest name</th>
            <th>Type</th>
            <th>Cr amount</th>
            <th>Dr amount</th>
            <th>Balance</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> new test contest</td>
            <td>cr</td>
            <td class="cr"> 500 .00 </td>
            <td class="dr"> 0.00 </td>
            <td class="total">0.00</td>
            <td>27th Dec 2018</td>
        </tr>
        <tr>
            <td> new test contest</td>
            <td>dr</td>
            <td class="cr"> 0.00 </td>
            <td class="dr"> 500 .00 </td>
            <td class="total">0.00</td>
            <td>01st Jan 1970</td>
        </tr>
        <tr>
            <td> new test contest</td>
            <td>cr</td>
            <td class="cr"> 500 .00 </td>
            <td class="dr"> 0.00 </td>
            <td class="total">0.00</td>
            <td>28th Dec 2018</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th>Total:-<span class="crt"> </span></th>
            <th>Total:-<span class="drt"> </span></th>
            <th>Total:-<span class="collectedt"> </span></th>
            <th></th>

        </tr>
    </tfoot>
</table>

Answer 3

You should look for specific element inside the tr you have, using find() on the current tr you are iterating (in this case: this). Because using $(...) will match all the elements with the same class and that will make your code fail on understanding which value it should use to calculate.

Please, check below code and see if it helps you.

$(document).ready(function() {

$('#cbtn-selectors tr').each(function() {

    var cr = Number(parseFloat($(this).find('.cr').text()));
    var dr = Number(parseFloat($(this).find('.dr').text()));
    var sum = 0;
    if (!isNaN(cr) && cr > 0) {
        sum = Number(parseFloat($(this).find('.total').text()));
        sum = sum + cr;
    } else {
        sum = Number($(this).find('.total').text());
        sum = sum - dr;
    }
    $(this).find('.total').html(sum);
});
});

.total{
  color: green;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cbtn-selectors" class="table table-striped table-bordered nowrap">
    <thead>
        <tr>
            <th>Contest name</th>
            <th>Type</th>
            <th>Cr amount</th>
            <th>Dr amount</th>
            <th>Balance</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> new test contest</td>
            <td>cr</td>
            <td class="cr"> 500 .00 </td>
            <td class="dr"> 0.00 </td>
            <td class="total">0.00</td>
            <td>27th Dec 2018</td>
        </tr>
        <tr>
            <td> new test contest</td>
            <td>dr</td>
            <td class="cr"> 0.00 </td>
            <td class="dr"> 500 .00 </td>
            <td class="total">0.00</td>
            <td>01st Jan 1970</td>
        </tr>
        <tr>
            <td> new test contest</td>
            <td>cr</td>
            <td class="cr"> 500 .00 </td>
            <td class="dr"> 0.00 </td>
            <td class="total">0.00</td>
            <td>28th Dec 2018</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th>Total:-<span class="crt"> </span></th>
            <th>Total:-<span class="drt"> </span></th>
            <th>Total:-<span class="collectedt"> </span></th>
            <th></th>

        </tr>
    </tfoot>
</table>