javascript 如何通过每行中动态添加的按钮更改 HTML 表格单元格值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27870671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-28 08:06:25 来源:igfitidea点击:
How do I change an HTML table cell value by a dynamically added button in each row
提问by Murad Elboudy
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>When I press on the sell button (which is dynamically added by JavaScript to each row when an item is added)
当我按下销售按钮时（当添加一个项目时，它会由 JavaScript 动态添加到每一行）
I want it to ask me about the amount I want to sell of that item and then when I enter the amount it should subtract the stock amount from the amount I want to sell (the one entered previously) and then update the stock amount in the cell of that item's row to the new number.
我想让它询问我想出售该商品的数量，然后当我输入数量时，它应该从我想要出售的数量（之前输入的数量）中减去库存数量，然后更新该项目的行的单元格到新编号。
It's pretty simple but I just can't figure it out.
这很简单，但我就是想不通。
采纳答案by Phillip Dodson
Change this line:
改变这一行：
table.rows[a].cells[4].innerHTML = parseInt(table.rows[a].cells[4].innerHTML) - sell;
to this line:
到这一行：
this.parentNode.parentNode.cells[4].innerHTML = parseInt(this.parentNode.parentNode.cells[4].innerHTML) - sell;
To do it like you're trying, you would have to use a closure. This way, when you click a button, it adjusts the value of the button's parent's (td) parent (tr) cell 4.
要像您尝试的那样做，您必须使用闭包。这样，当您单击按钮时，它会调整按钮的父 (td) 父 (tr) 单元格 4 的值。
回答by Johncze
Is that what you want? (fiddle)
那是你要的吗？（小提琴）
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;
table.rows[a].cells[7].innerHTML = (parseInt(table.rows[a].cells[7].innerHTML)) ? parseInt(table.rows[a].cells[7].innerHTML) + parseInt(sell) : 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>回答by phpniki
var rowCount =0; // add a counter for your row
var insert = document.getElementById('insertitem');
insert.addEventListener('click', function() {
rowCount++; // increase row counter
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[4].id = "stock_"+rowCount; // add an id to your cell
table.rows[r].cells[5].innerHTML = minimum_Stock;
table.rows[r].cells[7].id = "sell_"+rowCount;
table.rows[r].cells[7].innerHTML = "0";
table.rows[r].cells[9].style.width = "100px";
var CreateBtn = document.createElement("button");
CreateBtn.innerHTML = "sell";
CreateBtn.id = "sellbtn";
CreateBtn.title = rowCount; // add title to your button to have the row counter
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");
stock_cell = document.getElementById("stock_"+this.title); // find the stock cell with row counter
sell_cell = document.getElementById("sell_"+this.title);
stock_item = parseInt(stock_cell.innerHTML); // get the current value
sell_item = parseInt(sell_cell.innerHTML);
stock_cell.innerHTML = stock_item - parseInt(sell); // increase sell item from stock
sell_cell.innerHTML = sell_item + parseInt(sell);
}
}
