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

Question

I'm trying to achieve two additions in my code.

1. I am trying to get the sum of the row values in the last column of the row
2. I am trying to get the sum of all the final columns in another div

I've achieved the first, my code gives me the correct value of each row. However the second sum is not populating the addition. It's giving me the same value of each row, but I want the value of all rows.

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

To fix this you need to create a loop which iterates through all the .netpay elements, not just the one which was updated, and generates the total value.

In addition, you need to perform the same action when the checkbox is changed. The logic itself can also be made more succinct and DRY, like this:

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

Note the removal of all the duplicate id attributes in your HTML. They are invalid, and are not required anyway.

Answer 2

I have introduced new variable totalsum. Replace the below function.your code will work as expected

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