投稿获客
  1. 创想鸟首页
  2. 用户投稿

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

程序猿 • • 用户投稿 • 阅读 0

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

使用 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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

414.1K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
如何理解C++中的整数溢出？
上一篇 2026年5月10日 10:37:38
C++状态模式如何管理状态 使用有限状态机的实现方法
下一篇 2026年5月10日 10:37:42

相关推荐

  • c语言float如何使用 用户投稿

    c语言float如何使用

    在 C 语言中，float 数据类型用于存储浮点数，需要使用 float 关键字声明变量并用 = 运算符赋值；它支持算术运算、比较运算、输入/输出；具有有限精度，通常为 6-7 位有效数字；数值范围取决于系统，通常为 -3.40282346638528859811704183484516925e+3…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • HTML5网页如何实现拖拽功能 HTML5网页拖放API的详细解析 用户投稿

    HTML5网页如何实现拖拽功能 HTML5网页拖放API的详细解析

    首先设置元素draggable=”true”并监听dragstart事件，通过dataTransfer传递数据；然后为目标区域绑定dragover、dragenter和drop事件，其中dragover需调用preventDefault()以允许投放；最后在drop事件中获取…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Node.js http.createServer 常见陷阱与正确响应处理 用户投稿

    Node.js http.createServer 常见陷阱与正确响应处理

    本文深入探讨了Node.js中使用`http.createServer`时常见的配置错误和响应处理问题。我们将详细讲解如何正确地将请求监听器函数传递给服务器实例，并强调在构建HTTP响应时，确保内容类型（Content-Type）与实际发送的数据（如HTML或JSON）保持一致的重要性，避免发送冲突…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Go语言中类型无关函数的实现：接口的应用 用户投稿

    Go语言中类型无关函数的实现：接口的应用

    在go语言中，与haskell等语言的hindley-milner类型系统不同，无法直接使用类型变量。go通过空接口`interface{}`来模拟类型无关的函数行为，允许函数处理任何类型的数据，从而实现类似泛型的功能，例如在实现`map`等高阶函数时。这种方式在go引入泛型之前是处理多态性的主要手…

    程序猿的头像 程序猿
    2026年5月10日
    100
  • 如何解决车载定位终端接收到的二进制数据无法解析的问题？ 用户投稿

    如何解决车载定位终端接收到的二进制数据无法解析的问题？

    车载GPS数据解析故障排除指南 车载GPS定位终端的数据传输和解析经常会遇到问题。本文针对用户反馈的二进制数据无法解析的情况，提供详细的解决方案。 问题：无法解析二进制GPS数据 用户已成功连接车载GPS终端到服务器，但服务器接收到的数据为二进制格式，例如： b’~x01x00x00!x01ea8f…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Go语言中指针操作符*与取地址符&的全面解析 用户投稿

    Go语言中指针操作符*与取地址符&的全面解析

    本文深入探讨Go语言中*和&这两个核心操作符的作用。&用于获取变量的内存地址，生成一个指向该变量的指针；而*则用于声明指针类型、对指针进行解引用以访问其指向的值，以及通过指针间接修改变量的值。理解它们对于掌握Go的内存管理和数据传递机制至关重要，尤其是在函数参数传递和结构体操作中。 …

    程序猿的头像 程序猿
    2026年5月10日
    000

  • Chrome性能面板中XHR Ready State Change请求来源如何查看？

    Chrome性能面板：追踪XHR Ready State Change请求来源 Chrome开发者工具的性能面板火焰图中，有时会出现与XHR Ready State Change相关的任务，但缺少对应的请求信息。 以下步骤将帮助您定位这些请求的来源： 打开Chrome浏览器并访问目标网页。按下F12…

    程序猿的头像 程序猿
    用户投稿 2026年5月10日
    000

  • C++状态模式如何管理状态 使用有限状态机的实现方法

    C++状态模式如何管理状态 使用有限状态机的实现方法C++状态模式如何管理状态 使用有限状态机的实现方法C++状态模式如何管理状态 使用有限状态机的实现方法C++状态模式如何管理状态 使用有限状态机的实现方法

    有限状态机在c++++中通过定义状态接口、创建具体状态类、实现上下文类和管理状态转换逻辑来实现状态模式。1. 定义状态接口或基类，声明通用方法如handleinput()和getcolor()；2. 创建具体状态类，继承接口并实现各自行为；3. 创建上下文类，持有当前状态并处理状态切换；4. 实现状…

    程序猿的头像 程序猿
    2026年5月10日 • 用户投稿
    000
  • Electron 渲染进程安全集成 Node.js fs 模块指南 用户投稿

    Electron 渲染进程安全集成 Node.js fs 模块指南

    本教程旨在指导开发者如何在 Electron 渲染进程中安全地使用 Node.js 的 fs 模块，避免启用 nodeIntegration: true 和 contextIsolation: false 等不安全的配置。通过利用 Electron 的 IPC（进程间通信）机制和预加载脚本（prel…

    程序猿的头像 程序猿
    2026年5月10日
    100
  • 如何理解C++中的整数溢出？ 用户投稿

    如何理解C++中的整数溢出？

    c++++中的整数溢出发生在整数值超过其类型最大值时，会导致程序逻辑错误和安全漏洞。1）使用更大数据类型如long long；2）使用std::numeric_limits检查值范围；3）通过异常处理机制抛出溢出异常。 理解C++中的整数溢出是编程过程中不可或缺的一环，相信许多程序员都曾因整数溢出而…

    程序猿的头像 程序猿
    2026年5月10日
    000

  • 如何用Python实现数据的对数变换？

    如何用Python实现数据的对数变换？如何用Python实现数据的对数变换？如何用Python实现数据的对数变换？如何用Python实现数据的对数变换？

    对数变换是为了压缩数据范围、改善分布和提升模型效果。1. 压缩数据尺度，缩小数值差异；2. 使右偏数据更接近正态分布，提高统计模型准确性；3. 将乘性关系转为加性关系，便于因素分析；4. 使用numpy的np.log、np.log10进行变换，scipy的special.log1p处理近零值更精确，…

    程序猿的头像 程序猿
    2026年5月10日 • 用户投稿
    000
  • 在Python中的高阶函数 用户投稿

    在Python中的高阶函数

    简介 Python 的高阶函数世界 如果您想提高 Python 编程能力并生成更具表现力和更有效的代码，那么您来对地方了。 Python 中的函数不仅仅是专门的代码块。它们也是可以移动、转移、甚至动态生成的强大东西。通过处理其他函数，高阶函数增强了这种多功能性。 本文将广泛讨论高阶函数的原理。我们将…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • GLTF模型加载纹理缺失：从源头排查与解决指南 用户投稿

    GLTF模型加载纹理缺失：从源头排查与解决指南

    在使用GLTFLoader加载3D模型时，若遇到纹理缺失问题，首要且关键的排查步骤是验证GLTF模型本身的完整性。本教程将指导您如何通过在线工具检查模型纹理，区分模型源文件问题与代码加载问题，并提供相应的解决方案，确保您的3D对象能正确显示纹理。 理解GLTF与纹理加载机制 gltf（gl tran…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • 使用 Numba 优化 Python 复杂嵌套循环与矩阵运算性能 用户投稿

    使用 Numba 优化 Python 复杂嵌套循环与矩阵运算性能

    本文旨在解决 python 中涉及多层嵌套循环和矩阵运算的性能瓶颈。通过引入 numba 库进行即时编译（jit），并结合对循环结构及条件判断顺序的智能重构，大幅提升数值计算效率。教程将详细阐述如何应用 `@njit` 装饰器、使用 `numba.typed.list`，以及如何根据变量依赖关系优化…

    程序猿的头像 程序猿
    2026年5月10日
    200
  • PowerShell 调用 PHP 网页功能及结果处理 用户投稿

    PowerShell 调用 PHP 网页功能及结果处理

    本教程详细阐述了如何利用 PowerShell 的 Invoke-WebRequest cmdlet 外部调用 PHP 网页，并有效处理其返回结果。内容涵盖了基本的网页请求发送、HTTP 状态码的检查、网页内容的获取以及健壮的异常处理机制，旨在帮助用户实现与远程网页的自动化交互和数据处理。 使用 P…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • GolangWeb项目路由优化与请求调度实践 用户投稿

    GolangWeb项目路由优化与请求调度实践

    模块化路由设计提升Golang Web系统可维护性与性能。通过gin等框架按业务拆分路由组，实现清晰结构（如SetupUserRoutes管理用户路由）；利用中间件分层调度，全局日志、局部权限校验（如AuthMiddleware作用于/api组）提升复用与安全；优化路由匹配，采用静态路径、减少嵌套、…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • C++的consteval和constinit是什么_C++20中真正的编译期常量初始化 用户投稿

    C++的consteval和constinit是什么_C++20中真正的编译期常量初始化

    consteval 强制函数在编译期求值，如 consteval int square(int n) 只能接受编译期常量参数；constinit 确保变量以常量初始化，如 constinit static int x = 42 避免动态初始化，用于解决静态初始化顺序问题。两者分别强化了编译期计算和初…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • Blazor JS Interop 调用 Geolocation API 教程 用户投稿

    Blazor JS Interop 调用 Geolocation API 教程

    在 Blazor 中调用 Geolocation API 需通过 JS Interop：JavaScript 封装 navigator.geolocation 为 Promise 函数 getLocation，C# 使用 IJSRuntime.InvokeAsync 调用并匹配字段名，同时处理权限拒…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • 如何精确获取多组单选按钮的最终选中值 用户投稿

    如何精确获取多组单选按钮的最终选中值

    本教程旨在解决前端开发中，如何高效且准确地获取多组单选按钮（如产品变体选项）的最终选中值。我们将探讨在“添加到购物车”等操作触发时，避免中间选择状态干扰，仅捕获用户最终确认选项的最佳实践，并通过JavaScript代码示例详细演示其实现方法，确保数据一致性与用户体验。 场景描述与挑战 在电子商务网站…

    程序猿的头像 程序猿
    2026年5月10日
    000
  • HTMLpositionrelativeabsolutefixed格式属性区别 用户投稿

    HTMLpositionrelativeabsolutefixed格式属性区别

    relative 相对于自身原位置偏移但保留占位；2. absolute 脱离文档流，相对于最近非 static 祖先定位；3. fixed 相对于视口固定，不随滚动移动。 在HTML和CSS中，position 属性用于控制元素的定位方式。常见的取值有 relative、absolute 和 fi…

    程序猿的头像 程序猿
    2026年5月10日
    000

发表回复

登录后才能评论
关注微信