Как посчитать сумму динамически вычисляемых значений

Question

Подскажите, как посчитать сумму всех динамически рассчитываемых значений из колонки "вес(общий).

let table = document.getElementById('catalog');
tblrl = table.rows.length;
for (let i = 0; i < tblrl; i++) {
  $(`.countOrder${i}`).on("change", sizeinput_input);

  function sizeinput_input(e) {
    $(`label.weight${i}`).text(+this.value * +$(`label.quantum-label${i}`).text());
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table id="catalog" class="table table-hover table-bordered table-striped" style="width: 100%;">
  <thead>
    <tr>
      <th>Наименование</th>
      <th>Термическая обработка</th>
      <th>Торговая марка</th>
      <th>Квант</th>
      <th>Вес(общий)</th>
      <th>Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col col-5">
        <label>Наименование</label>
      </td>
      <td class="col col-5">
        <label>Охлажденное</label>
      </td>
      <td class="col col-5">
        <label>Марка</label>
      </td>
      <td class="col col-5" data-label="Квант" class="quantum-td">
        <label class="quantum-label1">1.5</label>
      </td>
      <td class="col col-5" data-label="Вес общий">
        <label class="weight1"></label>
      </td>
      <td class="col col-5" data-label="Количество">
        <input type="number" min="1" max="1000" id="quantity" class="form-control quantity countOrder1" />
      </td>
    </tr>
    <tr>
      <td class="col col-5">
        <label>Наименование</label>
      </td>
      <td class="col col-5">
        <label>Охлажденное</label>
      </td>
      <td class="col col-5">
        <label>Марка</label>
      </td>
      <td class="col col-5" data-label="Квант" class="quantum-td">
        <label class="quantum-label2">2.5</label>
      </td>
      <td class="col col-5" data-label="Вес общий">
        <label class="weight2"></label>
      </td>
      <td class="col col-5" data-label="Количество">
        <input type="number" min="1" max="1000" id="quantity" class="form-control quantity countOrder2" />
      </td>
    </tr>
  </tbody>
</table>

Answer 1

сначала сделайте удобную разметку.

продублируйте нужные данные к элементу и добавьте, куда будете писать результат. ваш инпут станет примерно таким

<input ... class="form-control quantity" data-q="1.5" data-target="#w-1"/>

то есть вписали сюда множитель, и куда записывать - #w-1. Соответствующий лейб примет вид

 <label class="weight" id="w-1"></label>

Далее забываем про всякие countOrder1, и вешаем общий обработчик на .quantity

$(".quantity").change(function(){
   let w = $(this).val() * $(this).data('q');
   let target = $(this).data('target');
   $(target).text(w);
});

теперь (здесь же) требуется подсчитать сумму. Для этого надо взять все .weight элементы, извлечь из них text() и просуммировать

let total = $(".weight").map((idx, el) => +$(el).text())
               .get()
               .reduce((acc,v) => acc+v, 0);

а результат куда-нибудь вписать.
полный пример:

$(".quantity").change(function(){
   let w = $(this).val() * $(this).data('q');
   let target = $(this).data('target');
   $(target).text(w);
   
   let total = $(".weight").map((idx, el) => +$(el).text())
                   .get()
                   .reduce((acc,v) => acc+v, 0);                   
   $("#result").text(total)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div id="result" class="alert alert-info"></div>

<table  id="catalog" class="table table-hover table-bordered table-striped table-sm" style="width: 100%;">
  <thead>
    <tr>
      <th>Квант</th>
      <th>Вес(общий)</th>
      <th>Количество</th>
    </tr>  
  </thead>
  <tbody>
    <tr>      
      <td class="col col-5" data-label="Квант" class="quantum-td">
        <label class="quantum-label1">1.5</label>
      </td>
      <td class="col col-5" data-label="Вес общий">
        <label class="weight" id="w-1"></label>
      </td>
      <td class="col col-5" data-label="Количество" >
        <input type="number" min="1" max="1000" class="form-control quantity" data-q="1.5" data-target="#w-1"/>
      </td>  
    </tr>
    <tr>

      <td class="col col-5" data-label="Квант" class="quantum-td">
        <label class="quantum-label2">2.5</label>
      </td>
      <td class="col col-5" data-label="Вес общий">
        <label class="weight" id="w-2"></label>
      </td>
      <td class="col col-5" data-label="Количество" >
        <input type="number" min="1" max="1000" class="form-control quantity" data-q="2.5" data-target="#w-2"/>
      </td>  
    </tr>  
  </tbody>  
</table>

БЛОГ НА HUSL

Как посчитать сумму динамически вычисляемых значений

Ответы (1 шт):