如何使用HTML DOM输出数组？-html教程-PHP中文网

如何使用HTML DOM输出数组？

霞舞

发布： 2024-10-28 08:36:13

原创

802人浏览过

如何使用HTML DOM输出数组？

问题分析：使用html dom输出数组

在该问题中，我们是通过HTML DOM来实现对数组的输出，具体做法是点击“保存”按钮添加数据行到列表中，然后点击“上传”按钮输出列表数据为数组形式。

实现方法

获取输入值：保存按钮的点击事件中，获取输入姓名和年龄的值，并拼接成列表中的一行数据（<tr>）；
动态添加数据行：将拼接好的列表行添加到table中的tbody（list）中；
上传输出：上传按钮的点击事件中，获取table中的所有数据行，遍历每一行，提取姓名和年龄值，并推入到result数组中；
输出结果：最后，将result数组的内容打印到控制台。

解决方案

然而，在提供的问题代码中，有两个问题：

即构数智人

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

查看详情

立即学习“前端免费学习笔记（深入）”；

不能直接使用foreach遍历NodeList：NodeList虽然类似数组，但本质上不是数组，不能直接使用foreach遍历，需要借助展开运算符(...)将其转换为真正的数组；
内部HTML拼接导致多余的td：innerHTML拼接时会在每一行后多拼接一个带有空格的td，需要过滤掉这样的td。

修正后代码

//...

//上传
document.getElementById("upload").addEventListener("click", () => {
  let listElement = document.getElementById("list");
  let lineElement = listElement.querySelectorAll("tr");
  let result = [];
  [...lineElement].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);
});

登录后复制

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