javascript - 如何计算动态表每行总计

Question

我正在尝试显示交易报表，其中，我添加每个表 tr 的贷方金额并尝试在余额列中显示，如果借方从余额中扣除并在余额列中显示，但是当我试图实现这些它表现出无限的平衡。请查看我的代码片段并告诉我我做错了什么。

$(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

您应该在您拥有的 tr 中查找特定元素，在您正在迭代的当前 tr 上使用 find() (在此案例:这个)。因为使用 $(...) 将匹配具有同一类的所有元素，这将使您的代码无法理解应该使用哪个值来计算。

请检查下面的代码，看看是否对您有帮助。

$(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>