如何在javascript中从HTML表创建对象数组？

PURU 发表于 Dev

PURU

如何从HTML表主体创建对象数组？这就是我的HTML的样子

<tbody id="metadata">
  <tr>
    <td><input type="numeric" /></td>
    <td><input type="numeric" /></td>
  </tr>
  <tr>
    <td><input type="numeric" /></td>
    <td><input type="numeric" /></td>
  </tr>
  <tr>
    <td><input type="numeric" /></td>
    <td><input type="numeric" /></td>
  </tr>
</tbody>

这是我尝试使用此javascript从对象数组中的表格单元中获取所有值的方法。我不明白为什么我cMetadata总是返回一个空数组

let cMetadata;
if (document.querySelectorAll("metadata")) {
  let tableData = document.querySelectorAll("metadata");
  cMetadata = [...tableData].map((row) => {
    return {
      altions: row.cells[0].textContent,
      lexity: row.cells[1].textContent,
    };
  });
}

对象的最终数组应该看起来像

cMetadata = [{altions: 1 , lexity: 2},{altions: 2 , lexity: 2},{altions: 3 , lexity: 2}]

莱塞特

确认tbody节点中有该table节点。您可以通过以下方式获得物品document.querySelectorAll("#metadata tr")：

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  const elements = document.querySelectorAll("#metadata tr");
  const result = Array.from(elements).map(tr => {
    const childs = tr.querySelectorAll("input");
    return {
      p1: childs[0].value,
      p2: childs[1].value
    };
  });

  console.log(result);
});

<table>
  <tbody id="metadata">
    <tr>
      <td><input type="numeric"></td>
      <td><input type="numeric"></td>
    </tr>
    <tr>
      <td><input type="numeric"></td>
      <td><input type="numeric"></td>
    </tr>
    <tr>
      <td><input type="numeric"></td>
      <td><input type="numeric"></td>
    </tr>
  </tbody>
</table>
<button>Get Data</button>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。