如何通过每行中动态添加的按钮更改 HTML 表格单元格值答案

【问题标题】：How do I change an HTML table cell value by a dynamically added button in each row如何通过每行中动态添加的按钮更改 HTML 表格单元格值
【发布时间】：2015-01-09 23:01:09
【问题描述】：

var insert = document.getElementById('insertitem');
insert.addEventListener('click', function() {
  var table = document.getElementById('insertfirsttable'),
    itemType = prompt("Enter the Item type"),
    filling1 = prompt("Enter the filling"),
    filling2 = prompt("Enter the filling"),
    filling3 = prompt("Enter the filling"),
    stock = prompt("Enter the amount in stock"),
    minimum_Stock = prompt("Enter the stock minimum");

  for (var r = 0; r < 1; r += 1) {
    var x = document.getElementById('insertfirsttable').insertRow(r);
    for (var c = 0; c < 10; c += 1) {
      var y = x.insertCell(c);
    }

    table.rows[r].cells[0].innerHTML = itemType;
    table.rows[r].cells[1].innerHTML = filling1;
    table.rows[r].cells[2].innerHTML = filling2;
    table.rows[r].cells[3].innerHTML = filling3;
    table.rows[r].cells[4].innerHTML = stock;
    table.rows[r].cells[5].innerHTML = minimum_Stock;
    table.rows[r].cells[9].style.width = "100px";
    var CreateBtn = document.createElement("button");
    CreateBtn.innerHTML = "sell";
    CreateBtn.id = "sellbtn";
    CreateBtn.style.width = "100px";
    CreateBtn.style.height = "25px";
    CreateBtn.style.cursor = "pointer";
    CreateBtn.style.fontSize = "18px";
    table.rows[r].cells[9].appendChild(CreateBtn);
    var sellBtn = document.getElementById("sellbtn");
    CreateBtn.onclick = function Sell() {
      var sell = prompt("Enter the amount of stock you're selling");
      for (var a = 0; a < table.length; a += 1) {
        for (var b = 0; b < table.cells.length; b += 1) {

        }
      }
      table.rows[a].cells[4].innerHTML = parseInt(table.rows[a].cells[4].innerHTML) - sell;
    }
  }

});

body {
  margin: 0;
  padding: 0;
  background-color: #E6E6E6;
  font-size: 20px;
}
table {
  border-spacing: 1px;
  width: 100%;
}
th {
  padding: 1px;
}
#firsttablediv {
  width: 100%;
}
#firsttable {
  color: white;
  background-color: green;
}
#insertitem {
  width: 100%;
  padding: 2px;
  font-size: 20px;
  cursor: pointer;
}
#insertfirsttable > tr {
  background-color: #31B404;
}

<html>

<body>
  <div id="firsttablediv">
    <table id="firsttable" border="1">
      <thead>
        <th>Item Type</th>
        <th colspan="3">Filling</th>
        <th>Stock</th>
        <th>Stock Minimum</th>
        <th>Closing Inventory</th>
        <th>Sell</th>
        <th>Last Month Inventory</th>
        <th colspan="2">
          <button id="insertitem">New Item</button>
        </th>
      </thead>
      <tbody id="insertfirsttable">
      </tbody>
    </table>
  </div>
</body>

</html>

当我按下出售按钮时（在添加项目时由 JavaScript 动态添加到每一行）

我希望它询问我想要出售该商品的数量，然后当我输入数量时，它应该从我想要出售的数量（之前输入的数量）中减去库存数量，然后更新库存该项目所在行的单元格中的金额为新数字。

这很简单，但我就是想不通。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

改变这一行：

table.rows[a].cells[4].innerHTML = parseInt(table.rows[a].cells[4].innerHTML) - sell;

到这一行：

this.parentNode.parentNode.cells[4].innerHTML = parseInt(this.parentNode.parentNode.cells[4].innerHTML) - sell;

要像您尝试的那样进行操作，您必须使用闭包。这样，当您单击按钮时，它会调整按钮的父 (td) 父 (tr) 单元格 4 的值。

【讨论】：

非常感谢你的作品就像一个魅力。我有点觉得我必须对 this.parentNode.parentNode 做点什么，但不知道到底是什么哈哈 :D 和顺便说一句，因为你调用了 parentNode 两次，然后它的目标是对吗？再次感谢
不客气。 "...顺便说一句，因为您调用了 parentNode 两次，所以它的目标是对吗？" 准确地说。这样，按钮的位置决定了正在编辑的行。
好吧，如果你能帮我解决一个问题，那就再好不过了。我现在希望将已售出的金额放入该行的销售单元格（单元格 [6]）中，并在我卖出更多时继续添加，这与您所做的非常相似，我认为但我只是尝试过，我不能搞不清楚。

body { margin: 0; padding: 0; background-color: #E6E6E6; font-size: 20px; } table { border-spacing: 1px; width: 100%; } th { padding: 1px; } #firsttablediv { width: 100%; } #firsttable { color: white; background-color: green; } #insertitem { width: 100%; padding: 2px; font-size: 20px; cursor: pointer; } #insertfirsttable > tr { background-color: #31B404; }

<html> <body> <div id="firsttablediv"> <table id="firsttable" border="1"> <thead> <th>Item Type</th> <th colspan="3">Filling</th> <th>Stock</th> <th>Stock Minimum</th> <th>Closing Inventory</th> <th>Sell</th> <th>Last Month Inventory</th> <th colspan="2"> <button id="insertitem">New Item</button> </th> </thead> <tbody id="insertfirsttable"> </tbody> </table> </div> </body> </html>