如何获取jQuery中所有行值的总和

时间：2020-05-07 08:35:04

标签： javascript jquery

我正在尝试在代码中添加两个内容。

  1. 我正在尝试获取行的最后一列中行值的总和
  2. 我正在尝试获取另一个div中所有最终列的总和

我已经实现了第一个，我的代码为我提供了每一行的正确值。但是，第二个总和没有填充加法。它给我每一行相同的值，但是我想要所有行的值。

$('.bonus-sum').keyup(function() {
  var sum = 0;
  var salary = parseFloat($(this).closest('tr').find('.wagein').text());
  var bonus = parseFloat($(this).closest('tr').find('.bonus-sum').val()) || 0;
  $(this).closest('tr').find('.bonus-in:checked').each(function() {
    sum = salary + bonus;
  });
  $(this).closest('tr').find('.netpay').text(sum.toFixed(2));
  var netpay = 0;
  netpay += sum;
  $('#total').text('₹ ' + netpay.toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table>
    <thead>
      <tr>
        <th class="text-center"><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
        <th>#</th>
        <th>Beneficiary Name</th>
        <th class="text-right box">Bonus ₹</th>
        <th class="text-right">Salary ₹</th>
        <th class="text-right">Net pay ₹</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
        </td>
        <td>1</td>
        <td>Chellammal Kochimoni</td>
        <td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
        <td class="wagein">400</td>
        <td class="netpay"></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
        </td>
        <td>2</td>
        <td>Christal Prema G.</td>
        <td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
        <td class="wagein">400</td>
        <td class="netpay"></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
        </td>
        <td>3</td>
        <td>Kamalesan T.</td>
        <td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
        <td class="wagein">400</td>
        <td class="netpay"></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
        </td>
        <td>4</td>
        <td>Palammal A.</td>
        <td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
        <td class="wagein">400</td>
        <td class="netpay"></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
        </td>
        <td>4</td>
        <td>Thangapazham</td>
        <td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
        <td class="wagein">400</td>
        <td class="netpay"></td>
      </tr>
    </tbody>
  </table>
</div>
<div>Total Net Pay <span id="total">₹ 0.00</span></div>

2 个答案:

答案 0 :(得分：1)

要解决此问题，您需要创建一个循环，该循环遍历{em> all 的.netpay元素，而不仅仅是已更新的元素，并生成总值。

此外，更改复选框后，您需要执行相同的操作。逻辑本身也可以变得更加简洁和干燥，例如：

$('.bonus-sum').on('input', updateRowTotal);
$('.bonus-in').on('change', updateRowTotal).trigger('change'); // trigger is to set values on load

function updateRowTotal() {
  let $tr = $(this).closest('tr');
  let salary = parseFloat($tr.find('.wagein').text()) || 0;
  let bonus = parseFloat($tr.find('.bonus-sum').val()) || 0
  let rowTotal = salary + ($tr.find('.bonus-in:checked').length ? bonus : 0);
  $tr.find('.netpay').text(rowTotal.toFixed(2));

  updateTotal();
}

function updateTotal() {
  let total = 0;
  $('.netpay').each((i, el) => total += parseFloat(el.textContent.trim() || 0));
  $('#total').text('₹ ' + total.toFixed(2));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table>
    <thead>
      <tr>
        <th class="text-center"><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
        <th>#</th>
        <th>Beneficiary Name</th>
        <th class="text-right box">Bonus ₹</th>
        <th class="text-right">Salary ₹</th>
        <th class="text-right">Net pay ₹</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
        </td>
        <td>1</td>
        <td>Chellammal Kochimoni</td>
        <td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
        <td class="wagein">400</td>
        <td class="netpay"></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
        </td>
        <td>2</td>
        <td>Christal Prema G.</td>
        <td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
        <td class="wagein">400</td>
        <td class="netpay"></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
        </td>
        <td>3</td>
        <td>Kamalesan T.</td>
        <td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
        <td class="wagein">400</td>
        <td class="netpay"></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
        </td>
        <td>4</td>
        <td>Palammal A.</td>
        <td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
        <td class="wagein">400</td>
        <td class="netpay"></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
        </td>
        <td>4</td>
        <td>Thangapazham</td>
        <td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
        <td class="wagein">400</td>
        <td class="netpay"></td>
      </tr>
    </tbody>
  </table>
</div>
<div>Total Net Pay <span id="total">₹ 0.00</span></div>

请注意，删除了HTML中所有重复的id属性。它们是无效的，并且还是不需要的。

答案 1 :(得分：0)

我介绍了新的变量totalsum。 替换下面的函数。您的代码将按预期工作

 <script>
       var totalsum=0;
        $('.bonus-sum').keyup(function() {
       var sum = 0;

      var salary = parseFloat($(this).closest('tr').find('.wagein').text());
      var bonus = parseFloat($(this).closest('tr').find('.bonus-sum').val()) || 0;
      $(this).closest('tr').find('.bonus-in:checked').each(function() {
        sum = salary + bonus;
        totalsum+=sum;
      });

     $(this).closest('tr').find('.netpay').text(sum.toFixed(2));
      var netpay = 0;
      netpay += totalsum;
      $('#total').text('₹ ' + netpay.toFixed(2));



    });

 </script>
相关问题
最新问题