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

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

碧海醫心

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

原创

534人浏览过

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

使用 HTML DOM 输出数组

问题

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

思路

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

具体操作

保存数据：
- 当点击“保存”按钮时，从输入字段中获取姓名和年龄的值。
- 使用 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);
});

登录后复制