Javascript生成的表 - 當該行中的數字輸入值發生變化時，如何更新該行中的其他單元格

Question

我今天面臨一個問題我正在創建一個帶有表格的彈出式購物車，我創建了一個數組

身份證 | 姓名 | 數量 | 價錢

然后我用javascript從這個數組生成表。
我的問題是，當我更改特定項目行的數量（= 表格行中的數量）時，我希望能夠更新價格和總數。 這應該適用於所有生成的表行。

這是我的 javascript 代碼：

var cartCount = 0;
var Total = 0;
var id = 1;

var labels = ['Name', 'Quantity', 'Price'];
var items;
var cartElement = document.getElementById('cartDisplay');
var counterElement = document.getElementById('counterDisplay');

function cartClick(name, quantity, price) {
  const x = {
    id: id,
    name: name,
    quantity: quantity,
    price: price
  };

  if (Obj.some(e => e.name === x.name)) {
    console.log('already there');
  } else {
    Obj.push(x);
    cartCount = cartCount + 1;
    Total = Total + x.price;

    id = id +1;

    buildTable(labels, Obj, document.getElementById('modalBODY'));
    items = Obj;
    console.log(items);
  }

  CheckCart(cartCount);
  console.log(cartCount);
}

function CheckCart(counter) { 
  if (counter > 0) {
    cartElement.style.display = "block";
    counterElement.innerHTML = counter;
  } else {
    cartElement.style.display = "none";
  }
}

function buildTable(labels, objects, container) {
  container.innerHTML = '';

  var table = document.createElement('table');
  // class table
  table.classList.add("cartTable");

  var thead = document.createElement('thead');
  var tbody = document.createElement('tbody');

  var theadTr = document.createElement('tr');
  for (var i = 0; i < labels.length; i++) {
    var theadTh = document.createElement('th');
    theadTh.classList.add("cartTh");
    theadTh.setAttribute("colSpan", "2");
    theadTh.style.padding = '12px';
    theadTh.innerHTML = labels[i];
    theadTr.appendChild(theadTh);
  }
  thead.appendChild(theadTr);
  table.appendChild(thead);

  for (j = 0; j < objects.length; j++) {
    var tbodyTr = document.createElement('tr');
    for (k = 0; k < labels.length; k++) {
      var tbodyTd = document.createElement('td');
      tbodyTd.classList.add("cartTd");
      tbodyTd.setAttribute("colSpan", "2");
      tbodyTd.style.padding = '12px';
      if (labels[k] === "Quantity") {
        var qinput = document.createElement('input');
        qinput.setAttribute("type", "number");
        qinput.setAttribute("min", "0");
        qinput.setAttribute("max", "10");
        qinput.setAttribute("id", "quantityInput");
        qinput.setAttribute("value", objects[j][labels[k].toLowerCase()]);
        tbodyTd.appendChild(qinput);
      } else {
      tbodyTd.innerHTML = objects[j][labels[k].toLowerCase()];
    }
    tbodyTr.appendChild(tbodyTd);
    }
    tbody.appendChild(tbodyTr);
  }

  table.appendChild(tbody);

  var tfoot = document.createElement('tfoot');
  var footTr = document.createElement('tr');
  var footTh = document.createElement('th');

  var footTd = document.createElement('td');
  footTd.setAttribute("id", "totalElement")

  tbodyTd.setAttribute("colSpan", "3");
  footTh.setAttribute("colSpan", "4");

  footTd.innerHTML = Total;
  footTh.innerHTML = 'TOTAL';
  footTd.classList.add("cartTd");
  footTd.classList.add("footerTable");
  footTh.classList.add("cartTh");

  footTr.appendChild(footTh);
  footTr.appendChild(footTd);
  tfoot.appendChild(footTr);

  table.appendChild(tfoot);

  container.appendChild(table);

  var beforeText = document.createElement("p");
  beforeText.style.marginTop = '5px';
  beforeText.innerHTML = "Requests";
  container.appendChild(beforeText);

  var input = document.createElement("INPUT");
  input.setAttribute("type", "text");
  input.style.width = '100%';
  input.style.padding = '6px';
  input.setAttribute("placeholder", "No onion, no tomato...");
  container.appendChild(input);
}

Answer 1

我通過創建 rowid 解決了類似的問題，當用戶單擊該行時，我會檢查更改。 這里的主要思想

tableRow.setAttribute("id", "row" + idTable + "_" + tableRow.rowIndex); // for easy handling and selecting rows

tableRow.addEventListener("click", function(){ ... here check for what ever change});

您也可以只在一個單元格中進行特定更改，因此將事件偵聽器附加到每個數量單元格並讀取新值，然后驗證和更新其他字段

qinput.addEventListener("change", function(){ ... here check for what ever the change triggers });

編輯 fortheOP：將事件偵聽器添加到 tablerow 的通用示例，這將選定的 table 行標記為紅色（類 table-danger）並從所有其他先前選定的行中刪除顏色：

tableRow.addEventListener("click", function(){
    tRowData = [];
    if(this.classList.contains("table-danger")) {
        this.classList.remove("table-danger");
        return;
    } else {
        var nodeParent = this.parentNode;
        var trows= nodeParent.getElementsByTagName("tr");
        for(var i = 0; i < trows.length;i++) {
            trows[i].classList.remove("table-danger");
        }
        this.classList.add("table-danger");

        var cells = this.getElementsByTagName("td");
        for ( i = 0; i < cells.length; i++) {
            tRowData.push(cells[i].innerHTML); // e.g.: Here you could place your update routine
        }

        tRowData.push(this.getAttribute("id"));
        tRowData.push(this.rowIndex);

        return tRowData;
        }
});