Почему поля этих HTML-таблиц не вычисляются при загрузке?

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

function sum_row_qty(el, poOrigin) {
  let rowTotal = 0
  if (el) {
    let parent = el.closest("tr")
    parent.querySelectorAll('.size_qty').forEach(function(e) {
        rowTotal += parseFloat(e.value);
    })
    if (rowTotal) {
      parent.querySelector('.qty').value = rowTotal;
    }
  } else {
    document.querySelectorAll("#tableRows > tr > td:first-child input").forEach(sum_row_qty);
  }
}
<table class = "table table-hover table-vcenter" id = "dtable">
  <thead>
    <tr>
      <th style = "width:4%; text-align: left">OS</th>
      <th style = "width:4%">XS</th>
      <th style = "width:4%">Total</th>
    </tr>
  </thead>
  <tbody id = "tableRows">
    <tr>

      <td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "14" onchange = "sum_row_qty(this);"></td>
      <td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "0" onchange = "sum_row_qty(this)"></td>
      <td><input type = "number" min = "0" class = "qty" name = "numberInputs" value = "" readonly = "true"></td>
    </tr>
    <tr>

      <td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "14" onchange = "sum_row_qty(this);"></td>
      <td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "0" onchange = "sum_row_qty(this);"></td>
      <td><input type = "number" min = "0" class = "qty" name = "numberInputs" value = "" readonly = "true"></td>
    </tr>
  </tbody>
</table>

Когда вы звоните sum_row_qty(), что не в себе? Вы понимаете, что вызываете это рекурсивно?

mykaf 18.11.2022 20:04

Спасибо за ваш комментарий, @mykaf. Функция вызывается при загрузке таблицы. Консоль регистрирует, что внутри else {}, и, кажется, запускается один раз, хотя есть 2 строки. Итак, я думаю, что это не дает правильных значений полей для суммирования.

onit 18.11.2022 20:19

@mykaf Я думаю, идея в том, что функция вызывается с верхнего уровня с пустым el, который должен перейти в else. Затем он вызывает себя в цикле, который должен выполнить код if.

Barmar 18.11.2022 20:21

Почему функция не использует аргумент poOrigin?

Barmar 18.11.2022 20:23

Можете ли вы добавить все недостающие функции и переменные? Или избавиться от обращений к таким вещам, как add_to_total() и getPoOrigin(), которые не имеют отношения к вопросу? Мы должны иметь возможность запускать код во фрагменте.

Barmar 18.11.2022 20:26

Прости за это, @Barmar! Просто удалил их. Спасибо за ваш комментарий!

onit 18.11.2022 20:27

@Barmar Я удалил ненужные функции. Любая идея о том, почему они не вычисляются, когда параметр не передается? Заранее спасибо за внимание.

onit 21.11.2022 18:51
[JS за 1 час] - 9. Асинхронный
[JS за 1 час] - 9. Асинхронный
JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы,...
Подъем в javascript
Подъем в javascript
Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих...
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
0
7
69
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот ответ, предложенный джентльменом на другой платформе :

function sumInputs(row) {
  const inputsArr = [...row.querySelectorAll('.size_qty')];
  return inputsArr.reduce((total, {
    value
  }) => total += parseFloat(value), 0);
}

function sum_row_qty(el) {
  if (el) {
    const currentRow = el.closest("tr");
    currentRow.querySelector('.qty').value = sumInputs(currentRow);
  }
}

tableRows.querySelectorAll('tr').forEach(row => {
  row.querySelector('.qty').value = sumInputs(row);
});
<table class = "table table-hover table-vcenter" id = "dtable">
  <thead>
    <tr>
      <th style = "width:4%; text-align: left">OS</th>
      <th style = "width:4%">XS</th>
      <th style = "width:4%">Total</th>
    </tr>
  </thead>
  <tbody id = "tableRows">
    <tr>

      <td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "14" onchange = "sum_row_qty(this);"></td>
      <td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "0" onchange = "sum_row_qty(this)"></td>
      <td><input type = "number" min = "0" class = "qty" name = "numberInputs" value = "" readonly = "true"></td>
    </tr>
    <tr>

      <td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "14" onchange = "sum_row_qty(this);"></td>
      <td><input class = "size_qty" type = "number" min = "0" name = "numberInputs" value = "0" onchange = "sum_row_qty(this);"></td>
      <td><input type = "number" min = "0" class = "qty" name = "numberInputs" value = "" readonly = "true"></td>
    </tr>
  </tbody>
</table>

Другие вопросы по теме