如何在不使用 jQuery 的情况下使用 JavaScript 动态更新 HTML 表格内容？

Question

我正在构建一个 Web 应用程序，我需要根据用户输入动态更新 HTML 表的内容，而不使用 jQuery 或任何其他库。我已成功向表中添加行，但我在更新现有行方面遇到困难。这是我的表格的 HTML 结构：

<table id="data-table">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <!-- Rows will be added here dynamically -->
</table>

以及我用来添加行的 JavaScript 代码：

function addRow(name, age) {
  const table = document.getElementById("data-table");
  const row = table.insertRow(-1);
  const cell1 = row.insertCell(0);
  const cell2 = row.insertCell(1);
  cell1.innerHTML = name;
  cell2.innerHTML = age;
}

这适用于添加新行，但我不确定如何使用新数据更新现有行的单元格。有没有一种有效的方法可以通过一个单元格值（例如名称）搜索行并直接用纯 JavaScript 更新它？

Answer 1

试试这个

(table, value) => {
  return table.querySelectorAll("TR").filter(function(elem) {
    return elem.children[0].textContent == value;
  })[0];
  
}