制作具有更新数值的动态表

如何解决制作具有更新数值的动态表

我正在尝试仅使用html和js创建动态表。到目前为止，我已经创建了它，以至于当输入名称和数字时，表格将使用输入的名称和数字创建新行。但是，我想这样做，以便在输入相同名称但不同数字的情况下，行值会更改。

例如，如果我输入'Bob'和10，则表将创建一个新行，输出'Bob'和10。但是，如果输入'Bob'和20，则表行值将更新为'Bob'和30（10 + 20）。我还希望该行在数字值达到0时删除自身，例如，如果我输入'Bob'和-10，则值分别为'Bob'和0，并且行会删除自己。

function createRows() {
  var inputName = document.getElementById("name").value;

  var inputStock = document.getElementById("stock").value;

  var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

  var newRow = tableRef.insertRow();

  var newCell = newRow.insertCell(0);
  var newCell2 = newRow.insertCell(1);

  var newText = document.createTextNode(inputName);
  var newText2 = document.createTextNode(inputStock);

  newCell.appendChild(newText);
  newCell2.appendChild(newText2);
}

<label for="name">Name</label>
<input type="text" placeholder="Type name..." id="name">
<label for="stock">Stock</label>
<input type="number" placeholder="Type number..." id="stock">
<button type="button" onclick="createRows();">Get Value</button>
<table id="myTable">
  <thead>
    <tr>
      <th colspan="1">Name</th>
      <th colspan="1">Stock</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

解决方法

调用createRows时，您必须遍历所有行以查看是否已存在具有该名称的条目，如果存在，则编辑/删除该条目，如果没有，则创建一个新条目。

这里是一个例子：

function createRows() {
  var inputName = document.getElementById("name").value;
  var inputStock = document.getElementById("stock").value;
  var table = document.getElementById('myTable');

  var existingRow = Array.from(table.rows).find(row => row.cells[0].textContent === inputName);
  if (existingRow) {
    var newValue = parseInt(existingRow.cells[1].textContent) + parseInt(inputStock);
    if (newValue === 0) {
      existingRow.remove();
    } else {
      existingRow.cells[1].textContent = newValue;
    }
  } else {
    var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

    var newRow = tableRef.insertRow();

    var newCell = newRow.insertCell(0);
    var newCell2 = newRow.insertCell(1);

    var newText = document.createTextNode(inputName);
    var newText2 = document.createTextNode(inputStock);

    newCell.appendChild(newText);
    newCell2.appendChild(newText2);
  }
}

<label for="name">Name</label>
<input type="text" placeholder="Type name..." id="name">
<label for="stock">Stock</label>
<input type="number" placeholder="Type number..." id="stock">
<button type="button" onclick="createRows();">Get Value</button>
<table id="myTable">
  <thead>
    <tr>
      <th colspan="1">Name</th>
      <th colspan="1">Stock</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

使用字典存储键值对，其中键将是字符串，值将是整数/浮点数。

var dict = { key1 : value1,key2 : value2,.... 
           };

每个新密钥的使用：

dict[new_key] = new_value;

如果密钥已经存在，则：

dict.key = dict[key] + new_value;

然后显示表中的所有键-值对，遍历字典。

for(var key in dict) {
   console.log(key + " : " + dict[key]);
}