如何通过每行中动态添加的按钮更改 HTML 表格单元格值
How do I change an HTML table cell value by a dynamically added button in each row
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 会动态添加到每一行）
我希望它询问我想出售该项目的金额，然后当我输入金额时，它应该从我要出售的金额（之前输入的金额）中减去库存金额，然后将该项目行单元格中的库存金额更新为新数字。
这很简单，但我就是想不通。
更改此行：
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 的值。
这就是你想要的吗？（小提琴）
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>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);
}
}
相关文章：
- 将HTML表格导出到excel时，无法将数据加载到excel文件中
- 打印预览没有应用程序页眉和页脚的html表格
- 将HTML表格导出到带有文本和图像的excel中
- JS图表和html表格重叠
- 带有单选按钮的html表格复制粘贴到xls中
- HTML表格导出为具有适当列宽和字体的pdf
- html表格的浮动水平滚动条
- 如何在不导致 HTML 表格失真的情况下正确使用追加
- ModalDialog:HTML表格应该是可滚动的，而不是整个页面
- HTML表格在打印后缺少边框颜色和背景颜色
- 使用 javascript 为 HTML 表格单元格指定颜色
- 如何自动从一个页面移动到另一个页面，然后回到 html 表格中分页的第一页
- 提交表单时如何在 HTML 表格中添加行
- 将Google电子表格转换为HTML表格
- 单击并用CTRL+C复制值时高亮显示html表格单元格
- 使用TableExport.js将HTML表格导出为PDF、WORD、PNG
- 打印html表格而不提示预览窗口
- 将html表格导出为word文件并更改文件方向
- 如何将表格html表格导出为PDF
- 如何访问HTML表格单元格中的选择
