How to calculate dynamic table each row total

Tags: ,



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

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>


Source: stackoverflow