Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
从HTML表格中获取非选中行数据的JavaScript教程_创想鸟
原创投稿
  1. 创想鸟首页
  2. 用户投稿

从HTML表格中获取非选中行数据的JavaScript教程

程序猿 • • 用户投稿

从HTML表格中获取非选中行数据的JavaScript教程

本教程详细讲解如何使用纯JavaScript在HTML表格中，当点击某行按钮时，高效地获取所有其他未被选中行的数据。文章通过事件监听、DOM遍历和自定义函数，提供了一套清晰的解决方案，并附带示例代码和注意事项，帮助开发者准确实现这一功能。

引言

在网页开发中，表格是展示和管理结构化数据的常用元素。用户经常需要与表格中的特定行进行交互，例如点击某行的按钮来执行操作。然而，有时我们的需求不仅仅是处理被点击的行，还需要获取表格中所有未被选中（即除了被点击行之外）的其他行的数据。这在数据比较、批量操作或生成特定报告时尤为常见。本教程将深入探讨如何使用纯javascript实现这一功能，避免使用复杂的第三方库，从而更好地理解底层dom操作。

问题分析与挑战

最初的尝试可能包括直接为每行绑定点击事件，并尝试将整个行对象序列化为JSON。例如：

var table = document.getElementById("all_department");if (table != null) {  for (var i = 0; i < table.rows.length; i++) {    table.rows[i].onclick = function() {      // 这里的 tableRow 实际上是 DOM 元素，直接 stringify 无法获取其内部文本数据      tableText(this);     }  }}    function tableText(tableRow) {  var myJSON = JSON.stringify(tableRow); // 这将序列化 DOM 元素对象，而不是其包含的文本数据  console.log(myJSON);}

这种方法存在两个主要问题：

数据提取不准确：JSON.stringify(tableRow) 会尝试序列化一个DOM元素对象，而不是提取其内部的文本内容。它会得到一个空对象或仅包含少量DOM属性的字符串，无法获取表格单元格（）中的实际数据。无法区分选中与非选中：即使能够正确提取单行数据，此方法也没有提供一种直接的方式来识别“非选中”行。我们需要一种机制来排除被点击的行，并遍历其余的行。

因此，我们需要一种更精确的DOM操作方法来监听事件、识别被点击的行，并有效地遍历其兄弟元素以提取所需数据。

解决方案概述

解决此问题的核心思路是：

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

事件监听：为表格中的所有操作按钮（例如每行中的“点击”按钮）绑定事件监听器，而不是为整行绑定。定位父行：当按钮被点击时，通过事件对象和DOM遍历方法，找到该按钮所在的 （行）元素。获取兄弟行：找到被点击行的所有同级 元素（即同一 下的其他行）。数据提取：遍历这些兄弟行，并从每个行的 单元格中提取文本内容，同时排除包含按钮的列。

核心概念与DOM操作

本方案将利用以下关键DOM操作方法：

querySelectorAll(): 用于选择页面中所有匹配特定CSS选择器的元素。forEach(): 遍历 NodeList 或数组。addEventListener(): 为元素绑定事件处理器。this (在事件处理器中): 指向触发事件的元素（即被点击的按钮）。closest(‘tr’): 从当前元素向上查找最近的匹配CSS选择器（tr）的祖先元素。这是定位父行的关键。自定义 getSiblings() 函数: 由于DOM没有直接提供 getSiblings 方法，我们需要编写一个函数来遍历元素的 parentNode 的 firstChild 和 nextSibling 来收集所有同级元素。

代码实现

下面是实现上述功能的完整HTML结构和JavaScript代码：

HTML 结构

      
             部门      创建日期      名称    
        
            管理部      2016-03-02      客户 X    
    
            销售部      2019-06-25      客户 Y    
    
            研发部      2020-01-15      客户 Z

JavaScript 代码

// 获取页面中所有的按钮元素const allBtns = document.querySelectorAll('button');// 为每个按钮添加点击事件监听器allBtns.forEach(function(btn) {  btn.addEventListener('click', function(e) {    // 阻止按钮的默认行为（如果按钮在表单中，可能触发提交）    e.preventDefault();     // 1. 定位被点击按钮所在的父级  元素    let clickedRow = this.closest('tr');    // 2. 获取被点击行的所有兄弟  元素    const siblingRows = getSiblings(clickedRow);    const extractedData = []; // 用于存储非选中行的数据    // 3. 遍历所有兄弟行，并提取其单元格数据    siblingRows.map(rowElement => {      const rowData = [];      // 获取当前行的所有 td 元素      rowElement.querySelectorAll('td').forEach((cellElement, index) => {        // 排除第一个 td 元素（通常是包含按钮的列）        if (index !== 0) {          rowData.push(cellElement.innerText.trim()); // 提取文本内容并去除首尾空白        }      });      if (rowData.length > 0) { // 确保有实际数据才添加        extractedData.push(rowData.join(', ')); // 将一行的多个数据用逗号连接      }    });    // 在控制台打印所有非选中行的数据    console.log('所有非选中行的数据:');    console.log(extractedData);    // 示例：将数据进一步处理或显示在页面上  });});/** * 获取指定 DOM 元素的所有兄弟元素（同级元素）。 * @param {HTMLElement} element - 要查找兄弟元素的参考元素。 * @returns {Array} - 包含所有兄弟元素的数组。 */const getSiblings = function(element) {  let siblings = [];  // 如果元素没有父节点，则没有兄弟元素  if (!element.parentNode) {    return siblings;  }  // 从父节点的第一个子节点开始遍历  let sibling = element.parentNode.firstChild;  // 循环直到没有更多的兄弟节点  while (sibling) {    // 检查节点类型是否为元素节点 (1) 并且不是自身    if (sibling.nodeType === 1 && sibling !== element) {      siblings.push(sibling);    }    // 移动到下一个兄弟节点    sibling = sibling.nextSibling;  }  return siblings;};

代码详解

const allBtns = document.querySelectorAll(‘button’);

这一行代码获取了文档中所有的

以上就是从HTML表格中获取非选中行数据的JavaScript教程的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518832.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
获取HTML表格中未选中行的值：jQuery实现教程
上一篇 2025年12月20日 11:54:45
使用 jQuery 获取 HTML 数据表格中未选中行的值
下一篇 2025年12月20日 11:54:57

相关推荐

  • 使用 JSON Schema 中的 oneOf 避免无效枚举值的错误提示

    使用 JSON Schema 中的 oneOf 避免无效枚举值的错误提示使用 JSON Schema 中的 oneOf 避免无效枚举值的错误提示使用 JSON Schema 中的 oneOf 避免无效枚举值的错误提示使用 JSON Schema 中的 oneOf 避免无效枚举值的错误提示

    本文旨在帮助开发者理解并解决在使用 JSON Schema 验证 JSON 数据时，由于 oneOf 约束可能导致的“无效枚举值”的错误提示问题。我们将通过示例代码，详细解释错误产生的原因，并提供相应的解决方案，以确保 JSON Schema 验证的准确性和可读性。 在使用 JSON Schema …

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    500

  • p5.js WebGL性能优化：首帧渲染耗时长的原因与对策

    p5.js WebGL性能优化：首帧渲染耗时长的原因与对策p5.js WebGL性能优化：首帧渲染耗时长的原因与对策p5.js WebGL性能优化：首帧渲染耗时长的原因与对策p5.js WebGL性能优化：首帧渲染耗时长的原因与对策

    在使用p5.js的WEBGL渲染模式时，首次调用image()函数渲染图片或p5.Graphics对象通常会比后续调用耗时显著增加。这主要是因为第一次渲染时，p5.js需要将图像数据从CPU内存上传到GPU的纹理内存中，涉及内存分配和数据复制，这是一个相对耗时的过程。后续调用由于纹理已被缓存，可以直…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    700
  • 为什么不同浏览器对硬件加速的实现存在差异？ 用户投稿

    为什么不同浏览器对硬件加速的实现存在差异？

    不同浏览器因渲染引擎、图形API及权衡策略差异导致硬件加速表现不同。1. Blink、Gecko、WebKit引擎在图层管理与GPU任务分配上设计不同；2. 各浏览器通过ANGLE等抽象层适配DirectX、Vulkan、Metal，转换开销与支持程度影响性能；3. 厂商在性能、兼容性、稳定性间取舍…

    程序猿的头像 程序猿
    2026年9月25日
    100
  • 豆包是否可以本地部署 自主可控环境下运行豆包的技术路径说明 用户投稿

    豆包是否可以本地部署 自主可控环境下运行豆包的技术路径说明

    本文旨在解答关于豆包是否可以在本地环境下进行部署并实现自主可控运行的问题。目前，豆包主要以云服务形式提供，用户通过网络访问其功能。要在自主可控的环境下运行类似的大型语言模型能力，通常需要采用不同的技术路径，即在本地计算资源上部署可用的AI模型。本文将概述实现本地自主可控AI运行的通用技术路线和关键步…

    程序猿的头像 程序猿
    2026年9月25日
    300

  • 荣耀 300 系列系统升级，后续多款新机待发

    荣耀 300 系列系统升级，后续多款新机待发荣耀 300 系列系统升级，后续多款新机待发荣耀 300 系列系统升级，后续多款新机待发荣耀 300 系列系统升级，后续多款新机待发

    日前，荣耀 300 系列手机迎来 magicos 9.0.0.187 版本升级，此次更新带来了清理建议、ai 通话等多项新功能，系统升级将以分批推送的形式逐步覆盖用户。 本次更新的主要亮点如下： 图库方面新增“清理建议”功能，可智能识别重复照片、相似图片及超大视频，帮助用户更高效地管理存储空间； 通…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    500

  • sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置

    sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置sublime怎么配置eslint进行js校验_sublime集成ESLint代码检查配置

    首先安装SublimeLinter和SublimeLinter-eslint插件，确保系统或项目中已安装ESLint；通过npx eslint –init生成配置文件；插件会自动调用项目内的eslint，若未识别可手动设置executable路径；保存JavaScript文件时即可实时显…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000
  • PHP文件引入时参数传递机制详解与最佳实践 用户投稿

    PHP文件引入时参数传递机制详解与最佳实践

    在php中，直接通过url查询字符串方式向`require`或`include`引入的文件传递参数是无效的，这会导致“未定义变量”错误。本文将深入探讨php文件引入的原理，并提供三种正确的参数传递方法：利用作用域共享、手动填充`$_get`数组，以及推荐的通过函数或类进行封装，旨在帮助开发者构建更健…

    程序猿的头像 程序猿
    2026年9月25日
    000

  • Safari浏览器怎么查看网页源代码_Safari浏览器网页HTML源代码查看方式

    Safari浏览器怎么查看网页源代码_Safari浏览器网页HTML源代码查看方式Safari浏览器怎么查看网页源代码_Safari浏览器网页HTML源代码查看方式Safari浏览器怎么查看网页源代码_Safari浏览器网页HTML源代码查看方式Safari浏览器怎么查看网页源代码_Safari浏览器网页HTML源代码查看方式

    首先启用Safari开发菜单，然后通过菜单命令或快捷键Option+Command+U查看完整HTML源代码；也可右键选择检查元素，使用Web检查器查看特定区域的DOM结构与样式信息。 如果您在浏览网页时需要检查页面的结构或调试内容，查看网页源代码是一个常用的方法。Safari浏览器提供了多种方式来…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000

  • Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素

    Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素Java 8 使用 Stream API 扁平化嵌套 Map 并提取首个元素

    本文将详细介绍如何使用 Java 8 的 Stream API 将一个嵌套的 Map 结构进行扁平化处理，并从中提取所需的数据。 具体来说，我们将把 Map<Integer, Map<String, List>> 转换为 Map，其中新 Map 的键是原内部 Map 的键，值…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    1200

  • Chrome浏览器怎么禁止图片和视频自动加载_网页媒体内容自动加载禁用教程

    Chrome浏览器怎么禁止图片和视频自动加载_网页媒体内容自动加载禁用教程Chrome浏览器怎么禁止图片和视频自动加载_网页媒体内容自动加载禁用教程Chrome浏览器怎么禁止图片和视频自动加载_网页媒体内容自动加载禁用教程Chrome浏览器怎么禁止图片和视频自动加载_网页媒体内容自动加载禁用教程

    可通过设置阻止Chrome自动加载媒体。①针对特定网站：点击地址栏锁形图标→网站设置→将“自动播放”设为不允许；②全局禁用：进入chrome://settings/content→自动播放→设为默认不允许；③使用扩展如uBlock Origin拦截媒体加载；④启用Lite模式以节省数据并延迟媒体加载…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    300

  • 修改 Android KeyStore 中 KeyPair 的用途

    修改 Android KeyStore 中 KeyPair 的用途修改 Android KeyStore 中 KeyPair 的用途修改 Android KeyStore 中 KeyPair 的用途修改 Android KeyStore 中 KeyPair 的用途

    本文档介绍了如何在 Android KeyStore 中修改现有 KeyPair 的用途，使其支持密钥协商 (Key Agreement) 操作。通过示例代码展示了如何利用 KeyStore.setEntry 方法在 Android 13 (API 33) 及以上版本中导入 KeyPair 并设置所…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    600

  • 专业横评便携微单：佳能R50V凭6K超采样+精准快速追焦 成 8000 元内全能首选

    专业横评便携微单：佳能R50V凭6K超采样+精准快速追焦 成 8000 元内全能首选专业横评便携微单：佳能R50V凭6K超采样+精准快速追焦 成 8000 元内全能首选专业横评便携微单：佳能R50V凭6K超采样+精准快速追焦 成 8000 元内全能首选专业横评便携微单：佳能R50V凭6K超采样+精准快速追焦 成 8000 元内全能首选

    随着旅行摄影与短视频创作的需求激增，便携微单已成为多数用户的核心影像工具。面对 8000元以下微单市场的繁杂选择，专业影像评测团队通过150小时实测（涵盖画质解析力、防抖稳定性、低光对焦等 15 项核心指标），结合近万份用户口碑反馈，筛选出 3 款高潜力机型。其中佳能 R50V 凭借“画质无短板、便…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    200

  • 并发处理共享列表并收集结果的方案

    并发处理共享列表并收集结果的方案并发处理共享列表并收集结果的方案并发处理共享列表并收集结果的方案并发处理共享列表并收集结果的方案

    本文旨在介绍如何利用 Java 并行流高效地处理大型列表，尤其是在每个元素的处理过程耗时较长的情况下。并行流能够将列表分割成多个子任务，并在多个线程上并发执行，从而显著提升处理速度。但同时，并发编程也带来了共享资源同步的问题，需要谨慎处理。 使用并行流并发处理列表 假设我们有一个 Foo 类，其 p…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000
  • 参加PHP+MySQL就业培训后能获得的岗位有哪些 用户投稿

    参加PHP+MySQL就业培训后能获得的岗位有哪些

    参加php+mysql就业培训后，你可以获得以下岗位：1. web开发工程师，利用php和mysql开发动态网站和web应用程序；2. 后端开发工程师，使用php构建后端服务和api；3. 全栈开发工程师，结合前端技术进行全站开发；4. 数据库管理员，负责mysql数据库的设计、优化和维护；5. 软…

    程序猿的头像 程序猿
    2026年9月25日
    400

  • 高效并发处理共享列表与结果收集的Java教程

    高效并发处理共享列表与结果收集的Java教程高效并发处理共享列表与结果收集的Java教程高效并发处理共享列表与结果收集的Java教程高效并发处理共享列表与结果收集的Java教程

    本文介绍了如何利用Java并发特性，特别是并行流（Parallel Streams），来高效处理共享列表，并将处理结果进行收集。针对耗时操作，通过将列表分割成子列表，并利用并行流并发执行，可以显著提高处理效率。同时，强调了在并发环境下对共享资源进行同步的重要性，并提供了收集处理结果的示例代码。 在处…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    000

  • 使用并行流并发处理共享列表并收集结果

    使用并行流并发处理共享列表并收集结果使用并行流并发处理共享列表并收集结果使用并行流并发处理共享列表并收集结果使用并行流并发处理共享列表并收集结果

    本文将探讨如何高效地并发处理共享列表，并收集处理结果。在处理大量数据时，将任务分解为多个子任务并行执行可以显著提高效率。Java 8引入的并行流（Parallel Streams）为我们提供了一种简洁而强大的方式来实现这一目标。 并行流简介 并行流是Java 8 Stream API的一个特性，它允…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    400

  • 如何在微服务之间共享静态数据

    如何在微服务之间共享静态数据如何在微服务之间共享静态数据如何在微服务之间共享静态数据如何在微服务之间共享静态数据

    微服务架构的本质决定了微服务之间无法直接共享静态变量。正如上面摘要所说，每个微服务都是一个独立的进程，拥有自己的内存空间，静态变量只在其所属的进程内有效。试图在一个微服务中访问另一个微服务的静态变量，就像试图在一个独立的Java程序中访问另一个程序的变量一样，是不可能的。 微服务架构的独立性 微服务…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    100

  • FineReport与.NET集成要点

    FineReport与.NET集成要点FineReport与.NET集成要点FineReport与.NET集成要点FineReport与.NET集成要点

    1、FineReport（FR）与.NET项目的集成主要涵盖三个核心部分，如上图所示。 2、报表发布是集成过程中的关键步骤之一。 3、需要注意的是，FR报表工程本质上是基于Java的Servlet应用，无法由IIS直接解析处理，因此必须将其部署在支持Servlet规范的Web应用服务器（如Tomca…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    200

  • 如何在微服务之间共享静态数据？

    如何在微服务之间共享静态数据？如何在微服务之间共享静态数据？如何在微服务之间共享静态数据？如何在微服务之间共享静态数据？

    在微服务架构中，各个服务都是独立的部署单元，拥有各自的内存空间。如同上述摘要所述，直接通过静态变量在不同的微服务之间共享数据是不可能的。 试图在一个微服务中设置静态变量的值，然后在另一个微服务中访问它，将会得到 null 或初始值，而不是之前设置的值。 这不是 Spring Boot 特有的问题，而…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    100

  • Micronaut中动态数据结构的类型安全验证策略

    Micronaut中动态数据结构的类型安全验证策略Micronaut中动态数据结构的类型安全验证策略Micronaut中动态数据结构的类型安全验证策略Micronaut中动态数据结构的类型安全验证策略

    本文探讨了在Micronaut应用中，如何有效处理具有动态属性和类型依赖验证的类。通过引入多态接口、特化实现类以及自定义Jackson反序列化器，我们能够实现对复杂动态数据结构的类型安全解析与精细化验证，确保数据完整性和业务规则的正确执行。 动态数据结构的验证挑战 在现代微服务架构中，经常会遇到需要…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    1000

发表回复

登录后才能评论
关注微信