Как решить с JS суммирование 1 строки и помимо столбца? JS

Question

    <table class="table table-bordered">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Description</th>
          <th scope="col">Cubic Meter</th>
          <th scope="col">Rate</th>
          <th scope="col">Taka</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td scope="row">Bortoman Reading</td>
          <td><input type="number" min="0" name="cm" placeholder="xx"></td>
          <td><input type="number" min="0" name="rate" placeholder="xx"></td>
          <td><input type="number" min="0" name="tk" placeholder="TK"></td>
        </tr>
        <tr>
          <td scope="row">Purber Reading</td>
          <td><input type="number" min="0" name="cm" placeholder="xx"></td>
          <td><input type="number" min="0" name="rate" placeholder="xx"></td>
          <td><input type="number" min="0" name="tk" placeholder="TK"></td>
        </tr>
<tr>
          <td scope="row" colspan="2">15% vat</td>
          <td><input type="number" min="0" name="rate" placeholder="xx"></td>
          <td><input type="number" min="0" name="tk" placeholder="TK"></td>
        </tr>
        <tr>
          <td scope="row">Total</td>
          <td><input type="number" min="0" name="TOTAL CUBIC METER" placeholder="xx"></td>
          <td><input type="number" min="0" name="TOTAL RATE" placeholder="xx"></td>
          <td><input type="number" min="0" name="TOTAL TAKA" placeholder="TK"></td>
        </tr>
      </tbody>
    </table>

Мне нужно решить это в JS. Я хочу суммировать строку "CM + RATE = TK" и столбец "ALL CM ROW (Суммирование в ВСЕМ КУБИЧЕСКОМ СЧЕТЧИКЕ) + ALL RATE ROW (Суммирование в ОБЩЕЙ СКОРОСТИ) = ALL Tk ROW (Суммирование в ИТОГО ТАКА)". Я думаю, вы понимаете, что я пытаюсь сделать. Подскажите, пожалуйста, как мне это решить. И мне нужен точный пример через этот код. Это будет более полезным для меня. И пользователь также может дать пустое поле, оно должно работать с пустым полем. 15% поле НДС может быть пустым или не может быть.

Answer 1

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

 document.getElementById('calculate').addEventListener('click', function() {
   var tr = document.querySelectorAll('table tr');
   var td = document.querySelectorAll('table tr:last-child td > input');
   var totalcm = 0,
     totalrate = 0;
   tr.forEach(function(el, i) {
     if (i !== 0) {
       let cm = el.querySelectorAll('td > input')[0].value;
       let rate = el.querySelectorAll('td > input')[1].value;
       el.querySelectorAll('td > input')[2].value = Number(cm) + Number(rate);
       totalcm += Number(cm);
       totalrate += Number(rate);

     }
   })
   td[0].value = totalcm;
   td[1].value = totalrate;
   td[2].value = totalrate + totalcm;
 });

Вы должны добавить это в свой HTML:

<button type="button" id="calculate">Calculate</button>

Answer 2

Попробуйте этот код

function calculateTotal() {
  var totalCm = 0;
  $("input[name='cm']").each(function() {
    totalCm += $(this).val() ? Number($(this).val()) : 0;
  });
  $("input[name='TOTAL CUBIC METER']").val(totalCm);

  // --------------------
  var totalRate = 0;
  $("input[name='rate']").each(function() {
    totalRate += $(this).val() ? Number($(this).val()) : 0;
  });
  $("input[name='TOTAL RATE']").val(totalRate);

  // --------------------
  $("tr").each(function() {
    if ($(this).children("td").length) {
      $($($(this).children("td")[2]).children("input")[0]).val(

        (($($($(this).children("td")[1]).children("input")[0]).val()) ? Number($($($(this).children("td")[1]).children("input")[0]).val()) : 0) +
        (($($($(this).children("td")[0]).children("input")[0]).val()) ? Number($($($(this).children("td")[0]).children("input")[0]).val()) : 0)

      )
    }
  });

  // --------------------
  var totalTaka = 0;
  $("input[name='tk']").each(function() {
    totalTaka += $(this).val() ? Number($(this).val()) : 0;
  });
  $("input[name='TOTAL TAKA']").val(totalTaka);

  // --------------------
}

$("input").on('change', function() {
  calculateTotal();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-bordered">
  <thead class="thead-dark">
    <tr>
      <th scope="col">Description</th>
      <th scope="col">Cubic Meter</th>
      <th scope="col">Rate</th>
      <th scope="col">Taka</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Bortoman Reading</th>
      <td><input type="number" min="0" name="cm" placeholder="xx"></td>
      <td><input type="number" min="0" name="rate" placeholder="xx"></td>
      <td><input type="number" min="0" name="tk" placeholder="TK"></td>
    </tr>
    <tr>
      <th scope="row">Purber Reading</th>
      <td><input type="number" min="0" name="cm" placeholder="xx"></td>
      <td><input type="number" min="0" name="rate" placeholder="xx"></td>
      <td><input type="number" min="0" name="tk" placeholder="TK"></td>
    </tr>
    <tr>
      <th scope="row">Total</th>
      <td><input type="number" min="0" name="TOTAL CUBIC METER" placeholder="xx"></td>
      <td><input type="number" min="0" name="TOTAL RATE" placeholder="xx"></td>
      <td><input type="number" min="0" name="TOTAL TAKA" placeholder="TK"></td>
    </tr>
  </tbody>
</table>

Для вашего кода в codepen сделайте вот так

$("tr").each(function() {
  if ($(this).children("td").length) {
    $($($(this).children("td")[3]).children("input")[0]).val(

      (($($($(this).children("td")[2]).children("input")[0]).val()) ? Number($($($(this).children("td")[2]).children("input")[0]).val()) : 0) +
      (($($($(this).children("td")[1]).children("input")[0]).val()) ? Number($($($(this).children("td")[1]).children("input")[0]).val()) : 0)
    )
  }
});