如何使用 HTML DOM 技术将表格数据以数组形式输出？-html教程-PHP中文网

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

碧海醫心

发布： 2024-10-28 08:51:01

原创

571人浏览过

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

使用 HTML DOM 输出数组

问题

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

思路

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

具体操作

保存数据：

即构数智人
即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

36

查看详情
- 当点击“保存”按钮时，从输入字段中获取姓名和年龄的值。
- 使用 HTML DOM 将其添加到列表中。
上传数据：
- 当点击“上传”按钮时，获取列表中所有的行元素。
- 遍历每行，并从每个单元格中提取文本内容。
- 将提取到的值存储到一个数组中。
- 最后，在浏览器控制台输出该数组。

代码实现

<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 代码时可能会产生一些空白单元格。

以上就是如何使用 HTML DOM 技术将表格数据以数组形式输出？的详细内容，更多请关注php中文网其它相关文章！