时间戳

首页 > 解决方案 > 如何使用jquery计算特定列的总和

html - 如何使用jquery计算特定列的总和

问题描述

我知道很多人以前问过类似的问题，但我已经尝试了所有方法，但我仍然无法获得特定列的总和。单击页面后，我想计算并显示借方和贷方列的总和以及总金额。任何人都可以帮我看看我是否使用了错误的方法来进行计算。JS.Fiddle

<table>
  <thead>
    <tr>
      <th>No</th>
      <th>Debit</th>
      <th>Credit</th>
      <th>Document No</th>
    </tr>
  </thead>
  <tbody class="acc_table">
    <tr class="acc-row">
      <td>1</td>
      <td>100</td>
      <td>0</td>
      <td>Testing 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>0</td>
      <td>100</td>
      <td>Testing 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>320</td>
      <td>0</td>
      <td>Testing 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>0</td>
      <td>250</td>
      <td>Testing 4</td>
    </tr>
  </tbody>
  <tfoot>
   <tr>
     <td>Total</td>
     <td><input type='text' id='totalDr' value='0.00' disabled></td>
     <td><input type='text' id='totalCr' value='0.00' disabled></td>
   </tr>
  </tfoot>
</table>
<br><br>
<input type='text' id='totalAmount' value='0.00' disabled> //Total_dr + total_cr

<script>
        $(document).ready(function() {
          var total_cr = 0;
          var total_dr = 0;
          $('table .acc_table .acc-row').each(function() {
            var $tr = $(this);
            var $column = $tr.find('td');
            var $debit = parseInt($column.next('td').html());
            var $credit = parseInt($column.next('td').next('td').html());
            if (!isNaN(value)) {
              total_dr += $debit; 
              total_cr += $credit;
            }
            var TotalAmount = (total_dr + total_cr) || 0; 
          });
          $("#totalDr").val(total_dr.toFixed(2)); //it should prompt 420
          $("#totalCr").val(total_cr.toFixed(2)); // it should prompt 350
          $("#totalAmount").val(TotalAmount.toFixed(2)) //it should prompt 770
        });

标签： htmljquery

解决方案

如果值不为空，您可以使用和使用相同的检查来获取借方和贷方列的 td，然后将总计添加到所需的输入td:eq(1)中。td:eq(2)

演示代码：

$(document).ready(function() {
  var total_cr = 0;
  var total_dr = 0;
  var TotalAmount = 0;
  $('table .acc_table tr').each(function() {
    var $tr = $(this);
    //get td `1` debit 
    var $debit = $tr.find('td:eq(1)').text().trim() != "" ? parseInt($tr.find('td:eq(1)').text().trim()) : 0;
    //get td `2` credit side
    var $credit = $tr.find('td:eq(2)').text().trim() != "" ? parseInt($tr.find('td:eq(2)').text().trim()) : 0;
    total_dr += $debit;
    total_cr += $credit;

  });
  TotalAmount = (total_dr + total_cr) || 0; //put this out
  $("#totalDr").val(total_dr.toFixed(2));
  $("#totalCr").val(total_cr.toFixed(2));
  $("#totalAmount").val(TotalAmount.toFixed(2))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>No</th>
      <th>Debit</th>
      <th>Credit</th>
      <th>Document No</th>
    </tr>
  </thead>
  <tbody class="acc_table">
    <tr class="acc-row">
      <td>1</td>
      <td>100</td>
      <td>0</td>
      <td>Testing 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>0</td>
      <td>100</td>
      <td>Testing 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>320</td>
      <td>0</td>
      <td>Testing 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>0</td>
      <td>250</td>
      <td>Testing 4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td><input type='text' id='totalDr' value='0.00' disabled></td>
      <td><input type='text' id='totalCr' value='0.00' disabled></td>
    </tr>
  </tfoot>
</table>
<br><br>


<input type='text' id='totalAmount' value='0.00' disabled> //Total_dr + total_cr

推荐阅读