投稿获客
  1. 创想鸟首页
  2. web前端

使用 jQuery 获取 HTML 数据表格中未选中行的值

程序猿 • • web前端 • 阅读 0

使用 jquery 获取 html 数据表格中未选中行的值

本文旨在提供一种使用 JavaScript 获取 HTML 数据表格中，在点击某行按钮后，获取所有其他未被点击行的数据的方法。我们将通过监听按钮的点击事件，向上查找父元素

，然后获取其兄弟元素，最终提取所需数据。

在 HTML 数据表格中，有时我们需要在用户点击某一行后，获取其他行的信息。例如，当用户点击某行的“删除”按钮时，我们可能需要获取其他行的ID，以便进行批量操作或其他处理。本文将介绍如何使用 JavaScript 实现这一功能。

实现步骤

监听按钮点击事件： 首先，我们需要获取表格中所有按钮的引用，并为每个按钮添加点击事件监听器。

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

获取当前行的兄弟元素： 当按钮被点击时，我们需要找到当前按钮所在的

元素，并获取其所有的兄弟元素。这些兄弟元素代表了所有未被点击的行。

提取数据： 遍历每个兄弟元素，提取所需的数据。在本例中，我们提取除了第一个单元格（包含按钮的单元格）之外的所有单元格的文本内容。

处理数据： 将提取的数据进行处理，例如，将其存储到数组中，或者将其显示在页面上。

代码示例

以下是一个完整的代码示例，演示了如何使用 JavaScript 获取 HTML 数据表格中未选中行的值：

  获取未选中行的值      table {      border-collapse: collapse;      width: 100%;    }    th, td {      border: 1px solid black;      padding: 8px;      text-align: left;    }  
      
      操作      部门      创建日期      名称    
        
            管理部门      2016-02-03      客户A    
    
            销售部门      2019-06-25      客户B    
    
            研发部门      2023-03-15      客户C    
  
  const allBtns = document.querySelectorAll('button');  allBtns.forEach(function(btn) {    btn.addEventListener('click', function(e) {      let elem = this.closest('tr');      const siblings = getSiblings(elem);      const result = [];      siblings.map(ele => {        ele.querySelectorAll('td').forEach((e, i) => {          if (i !== 0) {            result.push(e.innerText);          }        });      });      console.log(result.join(','));    })  });  const getSiblings = function(e) {    let siblings = [];    if (!e.parentNode) {      return siblings;    }    let sibling = e.parentNode.firstChild;    while (sibling) {      if (sibling.nodeType === 1 && sibling !== e) {        siblings.push(sibling);      }      sibling = sibling.nextSibling;    }    return siblings;  };

代码解释

document.querySelectorAll(‘button’): 获取所有按钮元素。addEventListener(‘click’, function(e) { … }): 为每个按钮添加点击事件监听器。this.closest(‘tr’): 找到当前按钮所在的

元素。this 关键字指向触发事件的按钮元素。closest(‘tr’) 方法从当前元素开始向上查找，直到找到最近的

元素。getSiblings(elem): 获取当前

元素的所有兄弟元素。siblings.map(ele => { … }): 遍历每个兄弟元素。ele.querySelectorAll(‘td’).forEach((e, i) => { … }): 遍历每个兄弟元素的单元格。if (i !== 0) { … }: 排除第一个单元格（包含按钮的单元格）。result.push(e.innerText): 将单元格的文本内容添加到 result 数组中。console.log(result.join(‘,’)): 将 result 数组中的所有元素连接成一个字符串，并输出到控制台。getSiblings 函数：用于获取元素的兄弟节点。

注意事项

确保 HTML 数据表格的结构正确，每个

元素都包含相同数量的

元素。如果需要提取的数据类型不是文本，则需要使用其他方法来获取数据，例如，使用 e.value 获取 元素的值。可以根据实际需求修改代码，例如，可以添加过滤条件，只提取满足特定条件的行的信息。

总结

本文介绍了如何使用 JavaScript 获取 HTML 数据表格中未选中行的值。通过监听按钮的点击事件，获取当前行的兄弟元素，并提取所需的数据，我们可以轻松地实现这一功能。该方法灵活易用，可以应用于各种场景，例如，批量操作、数据分析等。

以上就是使用 jQuery 获取 HTML 数据表格中未选中行的值的详细内容，更多请关注创想鸟其它相关文章！

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

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

关于作者

程序猿的头像

程序猿签约作者

266.4K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年11月15日 23:59:42
下一篇 2025年11月16日 00:40:24

相关推荐

  • Linux中如何安装Nginx服务_Linux安装Nginx服务的完整指南

    首先更新系统软件包，然后通过对应包管理器安装Nginx，启动并启用服务，开放防火墙端口，最后验证欢迎页显示以确认安装成功。 在Linux系统中安装Nginx服务是搭建Web服务器的第一步。Nginx以高性能、低资源消耗和良好的并发处理能力著称，广泛用于静态内容服务、反向代理和负载均衡。以下是在主流L…

    程序猿的头像 程序猿
    2025年12月6日 • 运维
    000

  • Vue.js应用中配置环境变量：灵活管理后端通信地址

    在%ignore_a_1%应用中，灵活配置后端api地址等参数是开发与部署的关键。本文将详细介绍两种主要的环境变量配置方法：推荐使用的`.env`文件，以及通过`cross-env`库在命令行中设置环境变量。通过这些方法，开发者可以轻松实现开发、测试、生产等不同环境下配置的动态切换，提高应用的可维护…

    程序猿的头像 程序猿
    2025年12月6日 • web前端
    000

  • VSCode选择范围提供者实现

    Selection Range Provider是VSCode中用于实现层级化代码选择的API，通过注册provideSelectionRanges方法，按光标位置从内到外逐层扩展选择范围，如从变量名扩展至函数体；需结合AST解析构建准确的SelectionRange链式结构以提升选择智能性。 在 …

    程序猿的头像 程序猿
    2025年12月6日 • 开发工具
    000

  • JavaScript动态生成日历式水平日期布局的优化实践

    本教程将指导如何使用javascript高效、正确地动态生成html表格中的日历式水平日期布局。重点解决直接操作`innerhtml`时遇到的标签闭合问题，通过数组构建html字符串来避免浏览器解析错误，并利用事件委托机制优化动态生成元素的事件处理，确保生成结构清晰、功能完善的日期展示。 在前端开发…

    程序猿的头像 程序猿
    2025年12月6日 • web前端
    000

  • JavaScript响应式编程与Observable

    Observable是响应式编程中处理异步数据流的核心概念，它允许随时间推移发出多个值，支持订阅、操作符链式调用及统一错误处理，广泛应用于事件监听、状态管理和复杂异步逻辑，提升代码可维护性与可读性。 响应式编程是一种面向数据流和变化传播的编程范式。在前端开发中，尤其面对复杂的用户交互和异步操作时，J…

    程序猿的头像 程序猿
    2025年12月6日 • web前端
    000

  • JavaScript生成器与迭代器协议实现

    生成器和迭代器基于统一协议实现惰性求值与数据遍历，通过next()方法返回{value, done}对象，生成器函数简化了迭代器创建过程，提升处理大数据序列的效率与代码可读性。 JavaScript中的生成器（Generator）和迭代器（Iterator）是处理数据序列的重要机制，尤其在处理惰性求…

    程序猿的头像 程序猿
    2025年12月6日 • web前端
    000

  • VSCode入门：基础配置与插件推荐

    刚用VSCode，别急着装一堆东西。先把基础设好，再按需求加插件，效率高还不卡。核心就三步：界面顺手、主题舒服、功能够用。 设置中文和常用界面 打开软件，左边活动栏有五个图标，点最下面那个“扩展”。搜索“Chinese”，装上官方出的“Chinese (Simplified) Language Pa…

    程序猿的头像 程序猿
    2025年12月6日 • 开发工具
    000

  • VSCode性能分析与瓶颈诊断技术

    首先通过资源监控定位异常进程，再利用开发者工具分析性能瓶颈，结合禁用扩展、优化语言服务器配置及项目设置，可有效解决VSCode卡顿问题。 VSCode作为主流的代码编辑器，虽然轻量高效，但在处理大型项目或配置复杂扩展时可能出现卡顿、响应延迟等问题。要解决这些性能问题，需要系统性地进行性能分析与瓶颈诊…

    程序猿的头像 程序猿
    2025年12月6日 • 开发工具
    000

  • Linux文件系统中的ext4与xfs对比

    ext4适合通用场景，稳定性强，兼容性好，适用于桌面和中小型服务器；XFS擅长大规模高并发I/O，扩展性强，适用于大文件与高性能需求环境。 在Linux系统中，ext4和XFS是两种广泛使用的文件系统，各自适用于不同的使用场景。选择哪一个取决于性能需求、数据规模以及工作负载类型。 设计目标与适用场景…

    程序猿的头像 程序猿
    2025年12月6日 • 运维
    000

  • VSCode的悬浮提示信息可以自定义吗？

    可以通过JSDoc、docstring和扩展插件自定义VSCode悬浮提示内容，如1. 添加JSDoc或Python docstring增强信息；2. 调整hover延迟与粘性等显示行为；3. 使用支持自定义提示的扩展或开发hover provider实现深度定制，但无法直接修改HTML结构或手动编…

    程序猿的头像 程序猿
    2025年12月6日 • 开发工具
    000

  • 优化PDF中下载链接的URL显示：利用HTML title 属性

    在pdf文档中，当包含下载链接时，完整的url路径通常会在鼠标悬停时或直接显示在链接文本中，这可能不符合预期。本文将探讨为何传统方法如`.htaccess`重写或javascript不适用于pdf环境，并提出一种利用html “ 标签的 `title` 属性来定制链接悬停显示文本的解决方…

    程序猿的头像 程序猿
    2025年12月6日 • 后端开发
    000

  • Phaser 3 游戏画布响应式适配：保持高度控制宽度

    本文旨在提供一种在 Phaser 3 游戏中实现画布响应式适配的方案，核心思路是利用 `Phaser.Scale.HEIGHT_CONTROLS_WIDTH` 缩放模式，使画布高度适应父容器，宽度随之调整，并始终居中显示。这种方法适用于需要保持游戏核心内容在屏幕中央，允许左右裁剪的场景。 在 Pha…

    程序猿的头像 程序猿
    2025年12月6日 • web前端
    000

  • 在 Java 中使用 Argparse4j 接收 Duration 类型参数

    本文介绍了如何使用 `net.sourceforge.argparse4j` 库在 Java 命令行程序中接收 `java.time.Duration` 类型的参数。由于 `Duration` 不是原始数据类型，需要通过自定义类型转换器或工厂方法来处理。文章提供了两种实现方案，分别基于 `value…

    程序猿的头像 程序猿
    2025年12月6日 • java
    000

  • Phaser 3游戏画布响应式布局：实现高度适配与宽度裁剪

    本文深入探讨phaser 3游戏画布在特定响应式场景下的布局策略，尤其是在需要画布高度适配父容器并允许左右内容裁剪时。通过结合phaser的scalemanager中的`height_controls_width`模式与精细的css布局，本教程将展示如何实现一个既能保持游戏画面比例，又能完美融入不同…

    程序猿的头像 程序猿
    2025年12月6日 • web前端
    000

  • 使用 String 和 Enum 的 Switch Case 详解

    本文详细讲解了如何在 Java 中结合 String 和 Enum 类型进行 switch case 操作。重点介绍了如何将字符串转换为 Enum 类型，以及如何在 switch 语句中使用 Enum。同时，探讨了分离关注点的原则，并提供了一个完整的示例，展示了如何将字符串到 Enum 的映射与实际…

    程序猿的头像 程序猿
    2025年12月6日 • java
    000

  • 洋葱浏览器下载文件安全吗_使用洋葱浏览器安全下载文件的注意事项

    首先验证.onion链接真实性，通过可信渠道获取并核对PGP签名；其次在虚拟机或沙盒中下载，关闭共享功能并校验文件哈希；接着使用多引擎扫描工具检测恶意代码，分析行为日志；最后严格管理浏览器权限，禁用JavaScript和第三方插件，定期清除痕迹。 如果您尝试通过洋葱浏览器下载文件，但对来源和操作方式…

    程序猿的头像 程序猿
    2025年12月6日 • 软件教程
    000

  • 在Java中如何初始化静态代码块

    静态代码块在类加载时执行一次，用于初始化静态资源；语法为static{}，多个按出现顺序执行；在创建对象、调用静态方法等主动使用类时触发，仅执行一次，与每次实例化都执行的实例代码块和构造函数不同。 在Java中，静态代码块用于在类加载时执行一次性的初始化操作。它会在类第一次被JVM加载时自动执行，且…

    程序猿的头像 程序猿
    2025年12月6日 • java
    000

  • 分布式系统下的JavaScript消息队列实现

    答案：在Node.js中通过集成RabbitMQ或Kafka实现分布式系统消息通信。使用amqplib连接RabbitMQ，创建通道并声明交换机与队列，通过publish发送、consume接收消息，保障可靠性与解耦；或采用kafkajs连接Kafka集群，生产者向topic发消息，消费者订阅处理，…

    程序猿的头像 程序猿
    2025年12月6日 • web前端
    000

  • 使用循环创建带参数的对象

    本文介绍了如何使用循环动态地创建对象，并使用数组中的数据作为构造函数的参数。通过示例代码展示了如何避免嵌套循环，并使用列表存储创建的对象，最后演示了如何访问和使用这些对象。 在Java编程中，经常需要根据一组数据动态地创建对象。例如，从数据库或文件中读取了一组用户信息，需要为每个用户创建一个Empl…

    程序猿的头像 程序猿
    2025年12月6日 • java
    000

  • Via浏览器为什么无法上传图片或文件_Via浏览器上传文件失败的原因及解决方法

    Via浏览器上传失败可因权限、设置或兼容性问题导致，需检查存储权限、启用JavaScript、更换User-Agent、使用系统文件选择器或清除缓存解决。 如果您在使用Via浏览器尝试上传图片或文件时遇到失败提示，可能是由于权限设置、浏览器配置或网页兼容性问题导致。此类问题通常可以通过调整设置或更换…

    程序猿的头像 程序猿
    2025年12月6日 • 电脑教程
    000

发表回复

登录后才能评论
关注微信