使用 HTML DOM 输出数组
问题
如何利用 html dom 技术将多行数据以数组的形式输出？
思路
可以通过访问 HTML DOM 元素的 innerText 属性来获取输入的值，并将其存储到数组中。
具体操作
保存数据：
当点击“保存”按钮时，从输入字段中获取姓名和年龄的值。使用 HTML DOM 将其添加到列表中。
上传数据：
当点击“上传”按钮时，获取列表中所有的行元素。遍历每行，并从每个单元格中提取文本内容。将提取到的值存储到一个数组中。最后，在浏览器控制台输出该数组。
代码实现
| 姓名 | 年龄 |
|---|
// 保存document.getElementById("save").addEventListener("click", () => { let name = document.getElementById("name").value; let age = document.getElementById("age").value; let listHTML = ` ${name} ${age} `; 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 技术将表格数据以数组形式输出？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1556603.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
关于作者
如何配置 Vue 项目自动打开浏览器？
上一篇
2025年12月22日 02:11:48
使用 JS 实现待办事项列表，点击“正在进行”任务复选框为什么无法自动分类到“已完成”？
下一篇
2025年12月22日 02:12:05
相关推荐
-
使用 JS 实现待办事项列表，点击“正在进行”任务复选框为什么无法自动分类到“已完成”？
使用 js 实现待办事项列表，无法通过 dom 将值渲染到网页 在使用 JS 实现待办事项列表时，遇到了如下问题：当我点击“正在进行”任务中的复选框时，任务无法自动分类到“已完成”中。 问题产生的平台版本及尝试过的解决方法： 已尝试移除 CSS 文件，以排除其对内容的覆盖。 相关代码： 主页面 ..…
-
如何配置 Vue 项目自动打开浏览器？
自动打开浏览器的 vue 项目配置 在 Vue 项目中，想要自动打开浏览器，可以进行如下配置： 1. 使用 serve 命令 更新 serve 命令，增加 –host localhost 参数： vue-cli-service serve –host localhost 2. 修改vu…
-
Emmet 语法中 *n 为何无效？
emmet 语法为何单个 * 无效？ 问题描述： 当使用 Emmet 语法编写 HTML 元素时，其他常见的语法都可以触发便捷提示，但唯独 *n 不行。 解决方案： 这个问题已经在 Emmet 官方 issue 中被热议。有以下解决方案可以尝试： 调整设置：尝试在 Emmet 设置中将 “…
-
Vue 项目启动时，浏览器自动打开的 URL 不是 http://localhost:8080/，而是 http://0.0.0.0:8080/，如何解决？
自动打开浏览器时配置 localhost 你在使用 Vue 项目时遇到了 自动打开浏览器功能的问题，虽然页面能打开，但是 URL 不是预期的 http://localhost:8080/，而是 http://0.0.0.0:8080/。本文将解答如何更正此问题。 更正： 要解决这个问题，有两个更正步…
-
Edge 输入反斜杠出现提示如何关闭？
如何关闭 edge 输入反斜杠时的提示 问题： 在 Edge 浏览器中输入反斜杠（/）时，会出现一个“管理个人信息”的提示。是否有方法可以关闭此提示？ 回答： 要关闭 Edge 输入反斜杠时的提示，可以在输入字段中添加以下属性： autocomplete=”off” aria-autocomplet…
-
如何在 Edge 浏览器中禁用输入反斜杠时出现的“管理个人信息”提示？
如何在 edge 中禁用反斜杠带来的“管理个人信息”提示 用户在 Edge 浏览器中输入反斜杠（）时，可能会遇到“管理个人信息”提示。此提示旨在帮助用户管理其个人信息，但对于某些情况来说可能令人烦恼。那么，有没有办法禁用这个提示呢？ 答案是肯定的。要解决此问题，用户需要在 input 元素中添加两个…
-
如何禁用 Edge 输入反斜杠时出现的“管理个人信息”提示？
如何禁用 edge 反斜杠触发“管理个人信息”提示 在 Microsoft Edge 中，当你在输入框中输入带有反斜杠（）符号的文本时，可能会出现“管理个人信息”提示。这是一种内置功能，旨在保护你的隐私，防止意外泄露个人信息。 有没有方法禁用此提示？ 要禁用此提示，你可以向输入元素添加两个属性： a…
-
如何关闭Edge浏览器中输入反斜杠\时的“管理个人信息”提示？
edge反斜杠输入提示：如何关闭 当在Microsoft Edge中输入反斜杠时，用户会看到一个“管理个人信息”提示。此提示旨在保护隐私，但对于某些用户来说可能会很烦人。 如何禁用此提示？ 此提示无法通过更改input属性来关闭。然而，有一种解决方法可以禁用它： 此代码添加了两个属性： autoco…
-
草稿功能如何实现：前端还是后端？
草稿功能的实现探讨 在设计草稿功能时，需要考虑实现方式的选择：前端实现还是后端实现。不同的实现方式适用于不同的场景。 后端实现 后端实现适合于需要跨多个会话保持草稿信息的场景。例如，用户希望无论何时登录，都能访问他们上次保存的草稿。在这种情况下，后端需要存储草稿数据并将其与用户的帐户关联。 实现方法…
-
草稿功能的实现：前端还是后端？
草稿功能的设计：前端或后端实现 在设计草稿功能时，是选择前端还是后端实现取决于具体需求和目标。 前端实现 如果草稿功能只满足特定场景，例如异常退出后重新登录时仍保留相关信息，那么前端实现即可。前端可以使用 localStorage 或 IndexedDB 等技术在浏览器中存储草稿数据。这种方式实现简…
-
草稿功能的设计：前端还是后端实现更合适？
草稿功能的实现选择 在草稿功能的设计中，是前端还是后端实现取决于其具体需求和实现程度。 后端实现 如果草稿需要满足以下条件： 跨越登录状态保存：草稿内容可以在用户在当前账户登录下无时间限制地使用，并且与浏览器无关。 在这种情况下，后端需要实现草稿功能，因为它需要将草稿信息持久化存储在数据库中并与用户…
-
为什么锚标签可以拥有 margin-top 值？
css 中为什么锚标签可以拥有 margin-top 值？ 在 HTML 中，锚元素（）原本属于行内元素，不支持 margin-top 属性。然而，在某些情况下，例如添加了 CSS 样式， 元素可能被转换成块元素，从而允许使用 margin-top。 在示例代码中， 元素定义在以下 CSS 类中： …
-
为什么 a 标签可以设置 margin-top？
图示a标签中margin-top值有效的疑虑 在一段HTML和CSS代码中，我们看到一个具有 “margin-top” 值的标签，这引起了我们的疑问：标签作为行内元素，为何可以拥有垂直边缘距？ 揭示谜底：从块元素的转变 默认情况下，标签是一个行内元素，这意味着它不能像块元素那…
-
为什么 a 标签的 margin-top 在该例子中生效？
为何 a 标签的 margin-top 生效？ 一个 HTML 页面如下： 我的订单 查看更多> 对应 CSS 代码： .pannel .pannel_tittle a { margin-top: 8px; font-size: 16px; color: #999;} 为什么 a 标签的 ma…
-
为什么 a 标签的 margin-top 属性可以生效？
a 标签为何拥有 margin-top 值？ 在此 HTML 结构中，CSS 样式 .pannel .pannel_tittle a 设定了 margin-top 属性。然而，a 标签默认是行内元素，而行内元素通常不能应用 margin-top 属性。 要让 a 标签的 margin-top 生效，…
-
为什么 a 标签可以应用 margin-top？
a 标签为何可应用 margin-top？ 在提供的 HTML 和 CSS 代码中，a 标签被赋予了 margin-top 值。然而，按常理，a 标签是行内元素，无法应用垂直外边距。 实际上，使 a 标签能够应用 margin-top 的关键在于其 display 属性。CSS 中的 display…
-
如何指定中文输入法中的引号和下引号？
中文输入法中引号和下引号如何指定输入？ 在中文输入法中，引号和下引号由同一个按键控制，按一次是上引号，再按一次是下引号，依次循环。如果需要在文本中输入特定类型的引号，如何指定呢？ 解决方案： 目前已知一种方法可以实现中文引号配对，具体步骤如下： 打开输入法设置界面，找到 “标点符号设置&…
-
中文输入法引号配对：如何解决上引号和下引号的输入难题？
中文输入法引号使用难题 在中文输入法中，上引号和下引号使用同一个按键，按一次出现上引号，再按一次出现下引号，依次循环。这给用户带来了不便，无法按需输入指定引号。 解决方案：自定义引号输入 目前，有一种方法可以实现中文引号配对： 在输入法设置中，找到自定义短语功能。在自定义短语中，创建一个新的短语。在…
-
HTML 下拉列表：如何用 JavaScript 和 jQuery 实现点击选项切换显示内容？
html 下拉选择列表：点击切换显示 在 HTML 中，您可以使用下拉选择列表创建交互式菜单。但是，如果您不使用标签，而使用 JavaScript (JS) 和 jQuery，如何实现单击选项时切换显示内容呢？ 解决方案 可以使用 JS 和 jQuery 来监听下拉选择列表中选项的单击事件。当检测到…
-
如何使用 JavaScript 和 jQuery 实现动态下拉选择框内容显示？
html 下拉选择框，点击后显示不同内容 在这个问题中，提问者使用了 JavaScript 和 jQuery 来创建一个下拉选择框，但是遇到了一个问题，当点击下拉选项时，显示的内容与预期不一致。 通常，在 HTML 下拉选择框中使用 标签来定义选项，并且当点击选项时，被选选项的文本会自动显示。然而，…
微信扫一扫 
支付宝扫一扫 
