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

Question

[Pulychuk]

Нужно при изменении количества пересчитать цену каждой строке таблицы. Вывести подсчет по определенной группе строк и общую цену. Вывод общей цены и цены группы строк пытался выводить по id, однако таблиц будет таких 4, поэтому этот вариант не прошел.
Написал следующую функцию для подсчета суммы в каждой строке:

function summ() {
            var sum = 0
            $('table tr').each(function() {
                $(this)
                    .find('.quantity-field')
                    .each(function() {
                        sum += parseInt($(this).val()) * parseInt($("td.price").text());
                    });
                $(this).find('td.sum').html(sum);
                sum = 0;
            });
        }

Но она берет для всех строк цену за единицу с первой строчки.
Пример того что есть - jsfiddle

Comments

[Pulychuk]

function summ() {
            var sum = 0
            $('table tr').each(function() {
                $(this)
                    .find('.quantity-field')
                    .each(function() {
                        sum += parseInt($(this).val()) * parseInt($(this).closest('tr').find('td.price'));
                    });
                $(this).find('td.sum').html(sum);
                sum = 0;
            });
        }

Сделал как Вы сказали, но тогда ячейка суммы становится пустой. Допустил еще где-то ошибку?

[0xD34F]

Да, пропущен вызов метода text. Неужели вы сами этого не заметили? Или для вас код - это не код, а набор заклинаний?

Ну и это - никогда, вы слышите - никогда не оформляйте комментарий к ответу как ответ. Во-первых - потому что комментарий всё-таки ответом не является. Во-вторых - так вы рискуете оказаться проигнорированным, потому что нет соответствующего уведомления. То, что я открыл вопрос повторно сейчас - ну, почти случайность. Мог бы открыть через месяц-другой при удалении невостребованных ответов.

Answer 1

[0xD34F]

замените

$("td.price").text()

на

$(this).closest('tr').find('td.price').text()

UPD. А вообще, давайте-ка перепишем и дополним ваш код. Вот, обновляются суммы не только в строках с input'ами, но и "итого" и "общая" тоже:

const sum = $items => $items.get().reduce((acc, n) => acc + +$(n).text(), 0);

function update($el, change) {
  const $tr = $el.closest('tr');
  const $count = $tr.find('.quantity-field').val((i, val) => Math.max(1, (val | 0) + change));

  $tr.find('.sum').text($count.val() * $tr.find('.price').text());

  $tr.nextAll('.total-tr').first().find('span').text(sum($tr
    .add($tr.prevUntil('.total-tr'))
    .add($tr.nextUntil('.total-tr'))
    .find('.sum')
  ));

  $table.find('.total-summ span').text(sum($table.find('.total-tr span')));
}

const $table = $('table')
  .on('click', '.button-plus, .button-minus', function() {
    const $btn = $(this);
    update($btn, +$btn.hasClass('button-plus') || -$btn.hasClass('button-minus'));
  })
  .on('input', '.quantity-field', function() {
    update($(this), 0);
  });

$table.find('.quantity-field').trigger('input');

или, без jquery

const sum = items =>
  Array.prototype.reduce.call(items, (acc, n) => acc + +n.textContent, 0);

function update(el, change) {
  let tr = el.closest('tr');
  const count = tr.querySelector('.quantity-field');
  count.value = Math.max(1, (count.value | 0) + change);

  tr.querySelector('.sum').innerText = count.value * tr.querySelector('.price').innerText;

  const rows = [];
  let total = tr;
  for (; !(total = total.nextElementSibling).matches('.total-tr'); rows.push(total)) ;
  for (; tr && !tr.matches('.total-tr'); rows.push(tr), tr = tr.previousElementSibling) ;

  total.querySelector('span').innerText = sum(Array.from(rows, n => n.querySelector('.sum')));
  table.querySelector('.total-summ span').innerText = sum(table.querySelectorAll('.total-tr span'));
}

const table = document.querySelector('table');

table.addEventListener('input', e => update(e.target, 0));
table.addEventListener('click', ({ target: t }) => {
  const change = +t.matches('.button-plus') || -t.matches('.button-minus');
  if (change) {
    update(t, change);
  }
});

table.querySelectorAll('.quantity-field').forEach(n => {
  n.dispatchEvent(new Event('input', { bubbles: true }));
});