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

Question

我试图在我的代码中实现两个添加。

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>

Answer 1

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

此外，当复选框被更改时，您需要执行相同的操作。 逻辑本身也可以变得更简洁和 DRY，如下所示：

 $('.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属性。 它们是无效的，无论如何都不需要。

Answer 2

我引入了新的变量总和。 替换下面的 function。您的代码将按预期工作

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