Как изменить сумму в конкретном ряде?

Question

[Danya Wyse]

Есть калькулятор продуктов,
Считает сумму по мере добавления нормально.
Но если изменить где нибудь цену или кол-во продукта, то у меня получается изменить либо все ячейки с классом COST либо затрагивается только первая. Пробовал перебирать через for и объявлять через querySelector. До меня не доходит как изменить ячейку cost только в том ряду где я редактировал.

"use sctrict";

let name = document.querySelector("#name");
let price = document.querySelector("#price");
let amount = document.querySelector("#amount");
let add = document.querySelector("#add");
let table = document.querySelector("#table");
let total = document.querySelector("#total");

function createCell(tr, value, name) {
  td = document.createElement("td");
  td.textContent = value;
  td.classList.add(name);
  tr.appendChild(td);

  return td;
}

add.addEventListener("click", function () {
  let tr = document.createElement("tr");

  allowEdit(createCell(tr, name.value, "name"));
  allowEdit(createCell(tr, price.value, "price"));
  allowEdit(createCell(tr, amount.value, "amount"));
  createCell(tr, price.value * amount.value, "cost");
  createCell(tr, "удалить", "remove").addEventListener("click", function () {
    tr.remove();
    recountTotal();
  });

  table.appendChild(tr);
  recountTotal();
});

//Считаем общую сумму
function recountTotal() {
  let costs = table.querySelectorAll(".cost");
  let result = 0;
  if (costs) {
    for (let cost of costs) {
      result += +cost.textContent;
    }
    total.textContent = result;
  }
}

//Редактирование ячейки
function allowEdit(td) {
  td.addEventListener("dblclick", function () {
    let inp = document.createElement("input");
    inp.type = "text";
    inp.value = +this.textContent;
    this.textContent = "";
    td.append(inp);
    inp.focus();

    inp.addEventListener("keydown", function (event) {
      if (event.key == "Enter") {
        td.textContent = this.value;
        if (td.classList.contains("price")) {
          price.value = this.value;
        }

        if (td.classList.contains("amount")) {
          amount.value = this.value;
        }

        if (td.classList.contains("price") || td.classList.contains("amount")) {
          //Проблема здесь.
          //по сути должно быть что то такое:
          //cost.textContent = price.value * amount.value;
        }
      }
    });
  });
}

Answer 1

[n1ksON]

вам нужно получить родительский элемент tr и получить его номер в данной таблице - это и будет строка

Comments

[Danya Wyse]

От души прям!
Добрался на скорую руку пока так, щас попробую красивее сделать

if (td.classList.contains("price") || td.classList.contains("amount")) {
          let tr = td.parentElement;
          console.log(tr.childNodes);
          for (let elem of tr.childNodes) {
            if (elem.closest(".cost")) {
              elem.textContent = price.value * amount.value;
            }
          }
          recountTotal();
        }

upd:

Сократил вот так

let cost = td.parentElement.cells[3];
          cost.textContent = price.value * amount.value;
          recountTotal();