如何獲取 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>