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

穆拉德·埃布迪(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>

当我按下“卖出”按钮时(当添加项目时,JavaScript将其动态添加到每一行)

我要它问我要出售的物品的数量,然后在输入数量时,应该从我要出售的数量(先前输入的数量)中减去库存数量,然后更新库存中的库存数量。该项目所在行的单元格到新编号。

这很简单,但我无法弄清楚。

菲利普·道森(Phillip Dodson)

更改此行:

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的值。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在datagrid视图控件的当前单元格中添加按钮控件

来自分类Dev

如何添加按钮以更改URL中的值

来自分类Dev

单击按钮如何将数组中的随机值分配给表格单元格

来自分类Dev

Google表格/ Javascript:如何“获取”动态的单元格值?

来自分类Dev

如何在Swift中的表格视图单元格中更改默认的删除按钮?

来自分类Dev

如何更改每行中特定单元格左侧的所有值

来自分类Dev

自动调整表格视图单元格的大小,并添加按钮作为子视图

来自分类Dev

无法在HTML中的表格单元格中更改颜色

来自分类Dev

Google表格:动态更改活动单元格中的值?

来自分类Dev

如何在AngularJS中动态更改表格单元格颜色

来自分类Dev

如何动态合并表格中的单元格

来自分类Dev

如何动态填写表格中的单元格?

来自分类Dev

相对于单元格添加按钮?

来自分类Dev

如何更改每行中特定单元格左侧的所有值

来自分类Dev

动态编辑html表格的单元格

来自分类Dev

为什么html表格单元格中的按钮会放大该单元格?

来自分类Dev

如何在“表格”单元格中更改UIImageView图像,请单击该单元格上的按钮?

来自分类Dev

如何仅通过CSS和HTML在每行中制作4个单元格

来自分类Dev

如何在表格视图单元格中添加“查看全部”按钮

来自分类Dev

如果表格是动态生成的,如何在点击时更改html单元格的颜色?

来自分类Dev

如何通过javascript更改html表的单元格值

来自分类Dev

从HTML表格中的单元格中检索选定的值

来自分类Dev

在静态表格的单元格页脚中添加按钮的简便方法

来自分类Dev

如何基于电子表格中另一个单元格中的值动态更改公式中的输入单元格?

来自分类Dev

如何使用jQuery动态更改表格单元格中的字体

来自分类Dev

如何从表格静态单元格更改按钮标题?

来自分类Dev

如何在自定义单元格中添加按钮?

来自分类Dev

如何通过在其他单元格或工作表中输入值来重复更改单元格值?

来自分类Dev

无法单击动态创建的表格单元格中的按钮

Related 相关文章

  1. 1

    在datagrid视图控件的当前单元格中添加按钮控件

  2. 2

    如何添加按钮以更改URL中的值

  3. 3

    单击按钮如何将数组中的随机值分配给表格单元格

  4. 4

    Google表格/ Javascript:如何“获取”动态的单元格值?

  5. 5

    如何在Swift中的表格视图单元格中更改默认的删除按钮?

  6. 6

    如何更改每行中特定单元格左侧的所有值

  7. 7

    自动调整表格视图单元格的大小,并添加按钮作为子视图

  8. 8

    无法在HTML中的表格单元格中更改颜色

  9. 9

    Google表格:动态更改活动单元格中的值?

  10. 10

    如何在AngularJS中动态更改表格单元格颜色

  11. 11

    如何动态合并表格中的单元格

  12. 12

    如何动态填写表格中的单元格?

  13. 13

    相对于单元格添加按钮?

  14. 14

    如何更改每行中特定单元格左侧的所有值

  15. 15

    动态编辑html表格的单元格

  16. 16

    为什么html表格单元格中的按钮会放大该单元格?

  17. 17

    如何在“表格”单元格中更改UIImageView图像,请单击该单元格上的按钮?

  18. 18

    如何仅通过CSS和HTML在每行中制作4个单元格

  19. 19

    如何在表格视图单元格中添加“查看全部”按钮

  20. 20

    如果表格是动态生成的,如何在点击时更改html单元格的颜色?

  21. 21

    如何通过javascript更改html表的单元格值

  22. 22

    从HTML表格中的单元格中检索选定的值

  23. 23

    在静态表格的单元格页脚中添加按钮的简便方法

  24. 24

    如何基于电子表格中另一个单元格中的值动态更改公式中的输入单元格?

  25. 25

    如何使用jQuery动态更改表格单元格中的字体

  26. 26

    如何从表格静态单元格更改按钮标题?

  27. 27

    如何在自定义单元格中添加按钮?

  28. 28

    如何通过在其他单元格或工作表中输入值来重复更改单元格值?

  29. 29

    无法单击动态创建的表格单元格中的按钮

热门标签

归档