Как суммировать динамически добавляемые значения столбцов?

Question

Я динамически добавил строки, которые мне нужно сложить.Добавленные столбцы и итоговые значения будут отображаться в отдельных полях.

Я хочу суммировать вводимые пользователем данные в один конкретный столбец, который является столбцом "DEBIT *".например, введите 1-ю строку в дебетовом столбце 100rs и нажмите кнопку Добавить новую строку и введите 100rs, чтобы вычислить сумму и показать общее поле.

Вот мой код.

Faild Fiddle здесь

var ctr = 1;
var FieldCount = 1;
$('#fst_row').on('click', '.button-add', function() {
  ctr++;
  var cashacc_code = 'cashacc_code' + ctr;
  var cashacc = 'cashacc' + ctr;
  var cash_narrat = 'cash_narrat' + ctr;
  var cashdeb = 'cashdeb' + ctr;
  var cashcredit = 'cashcredit' + ctr;
  var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">TDS A/C Name1</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
  $('#cashTable').append(newTr);

  $(document).on('click', '.dlt-icon', function() {
    $(this).parents('tr.jsrow').first().remove();
  });
});


/* second row  */

var ctr = 1;
var FieldCount = 1;
$('#sndRow').on('click', '.button-add', function() {
  ctr++;
  var rowNum = 'rowNum' + ctr;
  var cashacc_nme = 'cashacc_nme' + ctr;
  var acc_narrat = 'acc_narrat' + ctr;
  var accdeb = 'accdeb' + ctr;
  var accCredit = 'accCredit' + ctr;
  var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + rowNum + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc_nme" ><option value="">Account Name 1</option><option value="1">Plumz</option><option value="2">Plumz</option><option value="3">Plumz</option></select></td><td><input type="text" class=' + "joe" + ' id=' + acc_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe debClass" + ' id=' + accdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + accCredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
  $('#cashTable').append(newTr);

  $(document).on('click', '.dlt-icon', function() {
    $(this).parents('tr.jsrow').first().remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
  <thead>
    <tr>
      <th>A/c Code</th>
      <th>Account Name*</th>
      <th>Narration*</th>
      <th>Debit*</th>
      <th>Credit</th>
    </tr>
  </thead>
  <tbody>
    <tr id="fst_row">
      <td>
        <input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
      </td>
      <td>
        <select class="form-control selectsch_items" name="cashacc" id="cashacc">
          <option value="Choose and items">Choose and items</option>
          <option value="1">TDS A/c Name 1</option>
          <option value="2">TDS A/c Name 2</option>
        </select>
      </td>
      <td>
        <input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
      </td>
      <td>
        <input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly />
      </td>
      <td>
        <input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly />
      </td>
      <td class="tblBtn" style="width: 4%">
        <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a>
        <a href="#"><img src="./img/delete.svg" class="dlt-icon dlt-icon"></a>
      </td>
    </tr>

    <tr id="sndRow">
      <td>
        <input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
      </td>
      <td>
        <select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
          <option value="#">Choose and items</option>
          <option value="1">Joe</option>
          <option value="2">Joe2</option>
        </select>
      </td>
      <td>
        <input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
      </td>
      <td>
        <input type="number" class="form-control debClass" id="accdeb" placeholder="NNNNNN" name="accdeb" />
      </td>
      <td>
        <input type="number" id="accCredit" class="form-control" name="accCredit" readonly />
      </td>
      <td style="width: 4%">
        <a href="#"><img src="./img/plus.svg" id="debsum" class="insrt-icon button-add"></a>
        <a href="#"><img src="./img/delete.svg" class="dlt-icon"></a>
      </td>
    </tr>
  </tbody>
</table>

<div class="row">
  <div class="col-6">
    <div class="cashTotal">
      <p class="tableTotal">Total:</p>
    </div>
  </div>
  <div class="col-6">
    <input type="number" class="totaldeb" id="totaldbt" name="totaldbt" readonly>
  </div>
</div>

Я только начинающий, любая помощь будет благодарна.

Спасибо.

Answer 1

Я исправил твой код.пожалуйста, проверьте это.

var ctr = 1;
var FieldCount = 1;
$('#fst_row').on('click', '.button-add', function() {
  ctr++;
  var cashacc_code = 'cashacc_code' + ctr;
  var cashacc = 'cashacc' + ctr;
  var cash_narrat = 'cash_narrat' + ctr;
  var cashdeb = 'cashdeb' + ctr;
  var cashcredit = 'cashcredit' + ctr;
  var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' name="cashaccCode" onchange="calSum()" keyup="calSum()" placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">TDS A/C Name1</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + '  placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
  $('#cashTable').append(newTr);

  $(document).on('click', '.dlt-icon', function() {
    $(this).parents('tr.jsrow').first().remove();
  });
});


/* second row  */

var ctr = 1;
var FieldCount = 1;
$('#sndRow').on('click', '.button-add', function() {
  ctr++;
  var rowNum = 'rowNum' + ctr;
  var cashacc_nme = 'cashacc_nme' + ctr;
  var acc_narrat = 'acc_narrat' + ctr;
  var accdeb = 'accdeb' + ctr;
  var accCredit = 'accCredit' + ctr;
  var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + rowNum + ' name="cashaccCode" onchange="calSum()" keyup="calSum()" placeholder="NNNN" /></td><td><select class="form-control" id="cashacc_nme" ><option value="">Account Name 1</option><option value="1">Plumz</option><option value="2">Plumz</option><option value="3">Plumz</option></select></td><td><input type="text" class=' + "joe" + ' id=' + acc_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe debClass" + ' id=' + accdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + accCredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
  $('#cashTable').append(newTr);

  $(document).on('click', '.dlt-icon', function() {
    $(this).parents('tr.jsrow').first().remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
  <tbody>
    <tr id="fst_row">
      ///First row
      <td>
        <input type="number" onchange="calSum()" keyup="calSum()" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashaccCode" />
      </td>
      <td>
        <select class="form-control selectsch_items" name="cashacc" id="cashacc">
          <option value="Choose and items">Choose and items</option>
          <option value="1">TDS A/c Name 1</option>
          <option value="2">TDS A/c Name 2</option>
        </select>
      </td>
      <td>
        <input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
      </td>
      <td>
        <input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly />
      </td>
      <td>
        <input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly />
      </td>
      <td class="tblBtn" style="width: 4%">
        <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a>
        <a href="#"><img src="./img/delete.svg" class="dlt-icon dlt-icon"></a>
      </td>
    </tr>

    //// second row
    <tr id="sndRow">
      <td>
        <input type="number" onchange="calSum()" keyup="calSum()" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
      </td>
      <td>
        <select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
          <option value="#">Choose and items</option>
          <option value="1">Joe</option>
          <option value="2">Joe2</option>
        </select>
      </td>
      <td>
        <input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
      </td>
      <td>
        <input type="number" class="form-control debClass" id="accdeb" placeholder="NNNNNN" name="accdeb" />
      </td>
      <td>
        <input type="number" id="accCredit" class="form-control" name="accCredit" readonly />
      </td>
      <td style="width: 4%">
        <a href="#"><img src="./img/plus.svg" id="debsum" class="insrt-icon button-add"></a>
        <a href="#"><img src="./img/delete.svg" class="dlt-icon"></a>
      </td>
    </tr>
  </tbody>
</table>

<div class="row">
  <div class="col-6">
    <div class="cashTotal">
      <p class="tableTotal">Total:</p>
    </div>
  </div>
  <div class="col-6">
    <input type="number" class="totaldeb" id="totaldbt" name="totaldbt" readonly>
  </div>
</div>


<script>
function calSum(){

var calvalue = 0;

$("input[name*='cashaccCode']").each( function( key, item ) {
  //alert( key + ": " + item.value );
  calvalue = calvalue + parseInt(item.value); 
});

$("#totaldbt").val(calvalue);

$

}
</script>

Answer 2

РЕДАКТИРОВАТЬ: Извините, Джо, похоже, я прикрепил вашу скрипку к ссылке, кроме моей обновленной копии.Пожалуйста, проверьте ссылку еще раз.

Я создал JSfiddle , используя ваш рабочий пример.

Я изменил ваш код, чтобы упростить его, добавив атрибут к вашему дебетовому вводу data-action="sumDebit" и добавил в этот фрагмент.

$('body').on('change', '[data-action="sumDebit"]', function() { //Attach an event to body that binds to all tags that has the [data-action="sumDebit"] attribute. This will make sure all over dynamically added rows will have the trigger without us having to readd after ever new row.
    var total = 0;
  $('[data-action="sumDebit"]').each(function(i,e) { //Get all tags with [data-action="sumDebit"]
    var val = parseFloat(e.value); //Get int value from string
    if(!isNaN(val)) //Make sure input was parsable. If not, result come back as NaN
            total += val;
  });
  $('#totaldbt').val(total); //Update value to total
});