在 Javascript 中动态更新表

如何解决在 Javascript 中动态更新表

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

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;
});

解决方法

你可以试试这样的

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>