在 Javascript 中动态更新 Table

Question

我这里有一个 table，table 中的每个单元格都是一个输入字段。我有一个函数可以动态地将新行添加到 table 的底部，但是当我将新行添加到 table 时，它会删除过程中输入字段的内容。这样做的正确方法是什么？我希望能够动态填写 table 并根据需要添加行，而不删除过程中每个单元格的内容。提前致谢！

document.getElementById("btnAddItem").addEventListener("click", function () {
  numItems++;
  let template = `
  <tr>
  <td>
  <input type="text" id="itemDescription${numItems}" placeholder="Item" />
  </td>
  <td>
  <input type="text" id="itemValue${numItems}" placeholder="Value" />
  </td>
  </tr>
  `;

  table.innerHTML += template;
});

Answer 1

你可以试试这样的

const table = document.getElementById('Table');
let numItems = 1;
document.getElementById("btnAddItem").addEventListener("click", function () {
    numItems++;
    const row = document.createElement('tr');
    row.innerHTML = `
  <td>
  <input type="text" id="itemDescription${numItems}" placeholder="Item" />
  </td>
  <td>
  <input type="text" id="itemValue${numItems}" placeholder="Value" />
  </td>`;
  // You could also do the same for the cells and inputs
    table.appendChild(row);
});

<button id="btnAddItem">Add</button>
<table id="Table">
</table>

在 Javascript 中动态更新 Table

Dynamically Update a Table in Javascript

html

javascript

css

dynamic-tables