如何使用 HTML DOM 技术将表格数据以数组形式输出？

使用 HTML DOM 输出数组

问题

如何利用 HTML DOM 技术将多行数据以数组的形式输出？

思路

可以通过访问 HTML DOM 元素的 innerText 属性来获取输入的值，并将其存储到数组中。

具体操作

1. 保存数据：

   • 当点击“保存”按钮时，从输入字段中获取姓名和年龄的值。
   • 使用 HTML DOM 将其添加到列表中。

2. 上传数据：

   • 当点击“上传”按钮时，获取列表中所有的行元素。
   • 遍历每行，并从每个单元格中提取文本内容。
   • 将提取到的值存储到一个数组中。
   • 最后，在浏览器控制台输出该数组。

代码实现

<input id="name" placeholder="姓名" />
<input id="age" placeholder="年龄" />
<button id="save">保存</button>

<table id="list">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<button id="upload">上传</button>

// 保存
document.getElementById("save").addEventListener("click", () => {
  let name = document.getElementById("name").value;
  let age = document.getElementById("age").value;

  let listHTML = `
    <tr>
      <td>${name}</td>
      <td>${age}</td>
    <tr>`;

  document.getElementById("list").innerHTML += listHTML;
});

// 上传
document.getElementById("upload").addEventListener("click", () => {
  let listElement = document.getElementById("list");
  let lineElements = listElement.querySelectorAll("tr");
  let result = [];

  lineElements.forEach((item) => {
    let tds = item.querySelectorAll("td");
    if (tds.length) {
      let name = tds[0].innerText;
      let age = tds[1].innerText;
      result.push({ name, age });
    }
  });

  console.log(result);
});

注意

• 在遍历行元素时，需要使用扩展运算符 [...lineElements]，因为 lineElements 是类数组，不能直接用 forEach 遍历。
• 在提取单元格中的文本内容时，需要过滤掉空白单元格，因为拼接 HTML 代码时可能会产生一些空白单元格。