как получить сумму всех значений строки в 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

Чтобы исправить это, вам нужно создать al oop, который перебирает все элементы .netpay, а не только тот, который был обновлен, и генерирует общее значение.

Кроме того, вам нужно выполнить то же действие при изменении флажка. Сам лог c тоже можно сделать более лаконичным и 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>

Обратите внимание на удаление всех повторяющихся атрибутов id в вашем HTML. Они недействительны и в любом случае не требуются.

Answer 2

Я ввел новую переменную 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>