如何计算动态表每行总计

时间：2019-01-02 12:57:41

标签： javascript jquery

我要显示交易明细表，因此，我要添加每个表的贷方金额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>

3 个答案:

答案 0 :(得分：1)

您应该在要迭代的当前tr上使用find()（在本例中为tr）上，在this内查找特定元素。因为使用$(...)将匹配具有相同类的所有元素，这将使您的代码无法理解应使用哪个值进行计算。

请检查以下代码，看看是否有帮助。 

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

答案 1 :(得分：1)

事物的结合：

  • 在$('.br')中有错字，应该是$('.dr')
  • 选择元素时没有传递上下文，因此将选择第一个元素匹配类。在jQuery选择器中，第二个参数可以作为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>

答案 2 :(得分：0)

最后，我发现这里是可能帮助某人的答案

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

相关问题
最新问题