Question

var insert = document.getElementById('insertitem');
insert.addEventListener('click', function() {
  var table = document.getElementById('insertfirsttable'),
    itemType = prompt("Enter the item name"),
    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 minimum amount of stock");

  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].innerHTML = '<button id="sellbtn" style="width:102px; height: 25px; font-size:18px; cursor:pointer">Sell</button>';
    table.rows[r].cells[9].style.width = "100px";
    var sellBtn = document.getElementById("sellbtn");
  }
  //problem is here i guess
  sellBtn.addEventListener("click", function() {
    var sell = prompt("Enter the stock amount you're selling"),
      total = stock - sell;
    for (var t = 0; t < table; t += 1) {
      for (var c = 0; c < table.cells.length; c += 1) {}
      table.rows[t].cells[4].innerHTML = total;

    }
  });
});

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</th>
        <th colspan="3">Filling</th>
        <th>Storage</th>
        <th>Minimum Stock</th>
        <th>Last 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>

伙计们，我正在为我父亲的商店写一份申请表。他想要一个应用程序来管理他的项目，无论如何，在你点击插入项目按钮并输入细节之后。然后将该项目放在一行，其中每个细节都在其相应的单元格中，该行中还出现一个名为“Sell”的按钮，如果某个项目已经售出，则按下它并询问您有多少该项目出售？你键入数字，然后输入，它应该从该数字中减去股票编号，并在该行的股票单元格中输入新的数字，但我似乎不知道该怎么做。

Answer 1

JavaScript区域：

document.getElementById('test1').innerHTML = 'Night';

HTML区域：

<td id="test1">Day</td>

JavaScript代码将日更改为夜

夜晚值也可以替换为 HTML代码。

例如<b>Night</b>

Source

Answer 2

这里有一些你可以改进的东西。首先，您不需要for循环只执行一次：

for (var r = 0; r < 1; r += 1) {

摆脱这个循环。

那么如何掌握刚插入的行？幸运的是，Table.insertRow（）返回对插入的行的引用。所以你可以这样做：

var row = document.getElementById('insertfirsttable').insertRow();
row.cells[0].innerHTML = itemType;
//and so on

另请注意，您无需将索引传递给insertRow()，因为在表的末尾会自动添加一行。如果您想在开头使用它，请使用insertRow（0）。见这里：https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement.insertRow/

正如詹姆斯在评论中指出的那样，你不能给所有按钮提供相同的ID。在这种情况下，您将如何获得添加监听器的按钮的引用？最好使用document.createElement()创建元素，然后返回引用。

var button = document.createElement("button");
row.cells[9].appendChild(button);

button.addEventListener("click", function(){
   var sell = prompt("Enter the stock amount you're selling"),
   total = stock - sell;

   // we still have a reference to row here because we are in a closure.
   row.cells[4].innerHTML = total;
});

Answer 3

不使用从卖出值中减去的'stock'，而是根据ID从行中获取'stock'元素，转换为数字然后减去。

对于像这样的东西，有一种叫做JQuery的东西。你可以尝试一下。具体来说，.on() method将在此处运作。通常动态添加按钮时，事件处理程序不会挂钩到新按钮。这将导致您的代码停止工作。所以使用JQuery on（）方法代替。

ID也应该是唯一的。因此，为按钮创建唯一的ID值可能正在使用索引。

如何使用JavaScript动态更改HTML表格内容

3 个答案: