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

jQuery点击表格行内按钮高亮特定行教程

程序猿 • • 用户投稿

jQuery点击表格行内按钮高亮特定行教程

本教程旨在解决如何使用jquery精确实现点击表格行内的操作按钮时，仅高亮显示该按钮所在行的功能。文章通过分析常见实现误区，提供了一种简洁高效的解决方案，重点讲解了正确的事件绑定机制、dom遍历技巧以及jquery选择器的运用，帮助开发者避免重复高亮或无效操作，从而提升用户界面交互的准确性和流畅性。

实现点击表格行内按钮高亮特定行

在Web开发中，我们经常需要对表格数据进行交互操作，例如点击某行中的“激活”或“停用”按钮时，高亮显示该行以提供视觉反馈。然而，如果不采用正确的事件处理和DOM遍历方法，可能会遇到一些问题，例如：所有行都被高亮、需要双击才能触发、或者只有第一个匹配的元素被处理。本节将详细介绍如何利用jQuery来准确实现这一功能。

问题分析与常见误区

在尝试实现点击按钮高亮其所在行时，开发者常遇到以下几种情况：

直接在HTML中使用onclick属性并调用函数： 如果函数内部再次绑定事件监听器（如$(‘input[type=”button”]’).on(‘click’, …)），每次点击都会重复绑定，可能导致事件多次触发或行为异常（例如需要双击）。使用宽泛的选择器： 如果选择器不够精确（如document.querySelector(“input[type=’button’]”)），它可能只返回第一个匹配的按钮，导致只有第一行能被高亮。遍历所有行： 错误地遍历表格的所有行并尝试切换样式，会导致所有行都被高亮，而不是仅目标行。

问题的核心在于，我们需要一个机制来：

监听所有目标按钮的点击事件。在事件触发时，准确识别是哪个按钮被点击。从被点击的按钮出发，向上遍历DOM树，找到其最近的父级元素。对找到的元素应用高亮样式。

解决方案：jQuery事件绑定与DOM遍历

jQuery提供了一种非常优雅且高效的方式来解决这个问题，即利用其强大的选择器和DOM遍历方法。关键在于将事件绑定代码放置在DOM加载完成后执行，并利用$(this)上下文和closest()方法。

核心代码实现：

$(document).ready(function() {  // 绑定所有类型为"button"的input元素的点击事件  $('input[type="button"]').on('click', function() {    // $(this) 指向当前被点击的按钮    // .closest('tr') 从当前元素向上查找最近的父元素    // .css('background-color', 'red') 设置该元素的背景颜色为红色    $(this).closest('tr').css('background-color', 'red');  });});

代码解释：

$(document).ready(function() { … });：这是一个jQuery的惯用模式，确保其中的代码在文档对象模型（DOM）完全加载和解析后才执行。这避免了在HTML元素尚未创建时尝试对其进行操作的问题。$(‘input[type=”button”]’)：这是一个jQuery选择器，它会选中页面上所有type属性为”button”的元素。.on(‘click’, function() { … });：这是jQuery绑定事件的标准方法。它将一个click事件监听器附加到所有被选中的按钮上。当任何一个这样的按钮被点击时，提供的匿名函数就会被执行。$(this)：在事件处理函数内部，this关键字引用的是触发事件的DOM元素（即被点击的按钮）。$(this)将其包装成一个jQuery对象，以便我们可以使用jQuery的方法。.closest(‘tr’)：这是一个非常重要的jQuery遍历方法。它从当前元素（即被点击的按钮）开始，沿着DOM树向上查找，直到找到第一个匹配选择器’tr’的祖先元素。这样，我们就能精确地定位到被点击按钮所在的表格行。.css(‘background-color’, ‘red’)：这是jQuery用于设置CSS属性的方法。它将找到的元素的背景颜色设置为红色，从而实现高亮效果。

完整示例代码

为了更好地理解，下面提供一个完整的HTML结构和JavaScript代码示例。

HTML结构 (index.html)：

      点击按钮高亮表格行        /* 可选：定义一个高亮CSS类，以便更灵活地管理样式 */    .table-highlight {      background-color: #ffe0b2 !important; /* 更柔和的橙色，使用!important确保覆盖行内样式 */    }    table {      width: 100%;      border-collapse: collapse;      margin-top: 20px;    }    th, td {      border: 1px solid #ddd;      padding: 8px;      text-align: left;    }    th {      background-color: #f2f2f2;    }    .btn-danger {      background-color: #dc3545;      color: white;      border: none;      padding: 5px 10px;      cursor: pointer;      border-radius: 3px;    }    .btn-danger:hover {      background-color: #c82333;    }    
          
        合同方        结束日期        剩余天数        操作      
              
        Dummy1        2022-10-20        4              
      
        Dummy2        2022-4-26        200              
      
        Dummy3        2023-11-01        -30              
      
      // jQuery代码应该放在DOM加载完成后执行    $(document).ready(function() {      $('input[type="button"]').on('click', function() {        // 移除之前所有行的高亮（如果需要每次只高亮一行）        // $('#datatablesSimple tbody tr').removeClass('table-highlight');        // 获取当前点击按钮所在的行        var $currentRow = $(this).closest('tr');        // 切换高亮样式，如果已高亮则移除，否则添加        $currentRow.toggleClass('table-highlight');        // 如果只是简单地设置背景色，不移除其他行的，可以使用：        // $currentRow.css('background-color', 'red');      });    });

注意事项：

移除onclick属性： 请注意，在HTML中的这样的写法已经被移除。jQuery的事件绑定机制是推荐的现代Web开发实践，它将行为（JavaScript）与结构（HTML）分离，使得代码更易于维护和理解。

ID的唯一性： 在原始问题中，多个按钮使用了相同的id=”deac”。HTML规范要求ID必须是唯一的。虽然在这个jQuery解决方案中我们没有直接使用ID选择器来绑定事件，但养成ID唯一的习惯非常重要。对于多个相似元素，应使用class属性。

使用CSS类管理样式： 虽然css(‘background-color’, ‘red’)可以直接设置样式，但在实际项目中，更推荐定义一个CSS类（例如.table-highlight），然后使用addClass()和removeClass()或toggleClass()方法来管理元素的样式。这样可以更好地分离样式和行为，提高代码的可维护性和复用性。

$currentRow.addClass(‘table-highlight’);：添加高亮类。$currentRow.removeClass(‘table-highlight’);：移除高亮类。$currentRow.toggleClass(‘table-highlight’);：如果该行有table-highlight类则移除，没有则添加，实现点击切换高亮。

动态添加的行： 如果表格的行是动态通过JavaScript添加的，那么上述直接绑定事件的方法可能不会对新添加的行生效。在这种情况下，应该使用事件委托。

$(document).ready(function() {  // 使用事件委托，将事件绑定到表格或其父元素上  $('#datatablesSimple').on('click', 'input[type="button"]', function() {    // 移除之前所有行的高亮（如果每次只高亮一行）    // $('#datatablesSimple tbody tr').removeClass('table-highlight');    $(this).closest('tr').toggleClass('table-highlight');  });});

事件委托的原理是，事件监听器被放置在父元素上，当子元素上的事件冒泡到父元素时，父元素会检查事件的源头是否匹配指定的选择器。

总结

通过本教程，我们学习了如何利用jQuery的事件绑定机制和DOM遍历方法，精确地实现点击表格行内按钮时高亮其所在行的功能。关键在于：

在DOM加载完成后绑定事件。使用$(this)获取当前事件触发的元素。利用closest(‘tr’)向上查找最近的父元素。推荐使用CSS类来管理高亮样式，并通过toggleClass()等方法灵活控制。对于动态添加的元素，应考虑使用事件委托。

掌握这些技巧，将有助于您构建更具交互性和用户体验的Web表格界面。

以上就是jQuery点击表格行内按钮高亮特定行教程的详细内容，更多请关注创想鸟其它相关文章！

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

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

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
如何精确控制可拖拽元素的行为：阻止子元素拖拽事件冒泡到父元素
上一篇 2025年12月23日 17:00:23
Shadow DOM 样式与布局机制深度解析
下一篇 2025年12月23日 17:00:35

相关推荐

  • Android应用中Activity间文件路径传递与PDF加载指南

    Android应用中Activity间文件路径传递与PDF加载指南Android应用中Activity间文件路径传递与PDF加载指南Android应用中Activity间文件路径传递与PDF加载指南Android应用中Activity间文件路径传递与PDF加载指南

    本文旨在解决Android应用中通过Intent在Activity间传递文件路径时常见的NullPointerException问题，尤其是在加载PDF文件场景。我们将深入分析导致此错误的原因，并提供两种安全有效的解决方案：使用getAbsolutePath()传递字符串路径，或利用Serializ…

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

  • x浏览器怎么看视频的时候小窗播放_x浏览器视频画中画模式使用教程

    x浏览器怎么看视频的时候小窗播放_x浏览器视频画中画模式使用教程x浏览器怎么看视频的时候小窗播放_x浏览器视频画中画模式使用教程x浏览器怎么看视频的时候小窗播放_x浏览器视频画中画模式使用教程x浏览器怎么看视频的时候小窗播放_x浏览器视频画中画模式使用教程

    首先启用X浏览器内置画中画功能，播放视频后退出全屏并点击“小窗”图标即可悬浮播放；若不支持，可前往系统设置开启Safari的画中画选项，返回X浏览器播放时按主屏键触发系统级小窗；还可通过App Store下载浮屏播放器类第三方工具，安装后授权辅助功能，侧滑调出控制器提取视频流实现浮窗播放。 如果您在…

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

  • Java中利用Comparator对自定义对象列表进行高效排序

    Java中利用Comparator对自定义对象列表进行高效排序Java中利用Comparator对自定义对象列表进行高效排序Java中利用Comparator对自定义对象列表进行高效排序Java中利用Comparator对自定义对象列表进行高效排序

    本教程详细阐述了如何在Java中利用Comparator接口对自定义对象（如带有分数的单词）的ArrayList进行排序。我们将学习如何封装数据、使用List.sort()方法结合Comparator.comparing()和.reversed()实现升序和降序排序，并提供优化字母分数计算的实用建议…

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

  • 时间处理最佳实践：UTC 与时区转换

    时间处理最佳实践：UTC 与时区转换时间处理最佳实践：UTC 与时区转换时间处理最佳实践：UTC 与时区转换时间处理最佳实践：UTC 与时区转换

    本文旨在阐述在应用程序中处理日期和时间的最佳实践，尤其是在 UI 和后端之间传递时间信息时。核心思想是坚持使用 UTC 作为数据存储和交换的通用标准，并在用户界面展示或特定业务逻辑需要时才进行时区转换。本文将深入探讨如何使用 java.time 库中的 Instant 和 ZonedDateTime…

    程序猿的头像 程序猿
    2026年9月26日 • 用户投稿
    300
  • PHP特殊字符转义怎么做_PHP处理HTML特殊字符转义的函数 用户投稿

    PHP特殊字符转义怎么做_PHP处理HTML特殊字符转义的函数

    htmlspecialchars()用于转义HTML特殊字符以防止XSS攻击，仅处理&”‘五种字符，配合ENT_QUOTES和UTF-8编码可确保安全；htmlentities()则转义所有可表示的字符，适用于多语言场景；输出前应使用这些函数对数据进行转义，但需避免重…

    程序猿的头像 程序猿
    2026年9月26日
    100
  • Java中DelayQueue使用技巧 用户投稿

    Java中DelayQueue使用技巧

    DelayQueue适用于定时任务调度等场景，需实现Delayed接口的getDelay和compareTo方法，推荐基于System.nanoTime()计算延迟以避免系统时间跳变影响；队列无界，需监控大小并定期清理无效任务以防内存溢出；可配合线程池异步处理到期任务，消费线程应捕获异常防止中断；r…

    程序猿的头像 程序猿
    2026年9月26日
    200

  • firefox浏览器如何阻止视频自动播放 Firefox浏览器禁止网页视频自动播放设置

    firefox浏览器如何阻止视频自动播放 Firefox浏览器禁止网页视频自动播放设置firefox浏览器如何阻止视频自动播放 Firefox浏览器禁止网页视频自动播放设置firefox浏览器如何阻止视频自动播放 Firefox浏览器禁止网页视频自动播放设置firefox浏览器如何阻止视频自动播放 Firefox浏览器禁止网页视频自动播放设置

    Firefox可通过设置阻止视频自动播放，提升浏览体验。首先在“隐私与安全”中将自动播放下拉菜单改为“阻止”；其次可针对特定网站单独设置允许或禁止；还可安装“AutoplayStopper”等扩展增强控制；高级用户可修改about:config中的media.autoplay.default值为2以…

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

  • sublime如何禁用拼写检查_sublime关闭拼写检查方法

    sublime如何禁用拼写检查_sublime关闭拼写检查方法sublime如何禁用拼写检查_sublime关闭拼写检查方法sublime如何禁用拼写检查_sublime关闭拼写检查方法sublime如何禁用拼写检查_sublime关闭拼写检查方法

    Sublime Text默认开启拼写检查，可用红色波浪线标记疑似错误；2. 可通过菜单临时关闭当前文件的拼写检查；3. 修改用户设置添加”spell_check”: false可永久全局关闭；4. 针对特定语言语法文件添加该配置则仅关闭对应类型文件的检查；5. 关闭后红色波浪…

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

  • 计算循环迭代次数并与其他类中的迭代次数进行比较的教程

    计算循环迭代次数并与其他类中的迭代次数进行比较的教程计算循环迭代次数并与其他类中的迭代次数进行比较的教程计算循环迭代次数并与其他类中的迭代次数进行比较的教程计算循环迭代次数并与其他类中的迭代次数进行比较的教程

    本文旨在解决在Java程序中统计循环迭代次数，并将其与其他方法或类中的迭代次数进行比较的问题。通过示例代码，我们将展示如何创建一个结果对象来同时返回计算结果和迭代次数，避免使用全局计数器变量，确保每次调用都能获得准确的迭代次数统计。 在程序开发中，经常需要统计循环的迭代次数，尤其是在比较不同算法的效…

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

  • sublime怎么预览markdown文件_sublime渲染Markdown文件的方法

    sublime怎么预览markdown文件_sublime渲染Markdown文件的方法sublime怎么预览markdown文件_sublime渲染Markdown文件的方法sublime怎么预览markdown文件_sublime渲染Markdown文件的方法sublime怎么预览markdown文件_sublime渲染Markdown文件的方法

    Sublime Text需通过插件实现Markdown预览，1. 先安装Package Control管理工具；2. 用其安装Markdown Preview插件；3. 通过命令面板选择“Preview in Browser”在浏览器中实时预览渲染效果，支持多种语法风格，配合自动保存和外部工具可提升…

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

  • Android Plurals 正确使用指南

    Android Plurals 正确使用指南Android Plurals 正确使用指南Android Plurals 正确使用指南Android Plurals 正确使用指南

    本文旨在详细讲解 Android 中 Plurals 的正确使用方法，避免常见的错误用法。通过示例代码和注意事项，帮助开发者理解如何利用 Plurals 实现应用的多语言支持，从而提升用户体验。本文将重点介绍如何定义和使用 Plurals 资源，以及在不同语言环境下正确显示单复数形式。 Plural…

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

  • 使用正则表达式判断字符串中字符是否全部唯一

    使用正则表达式判断字符串中字符是否全部唯一使用正则表达式判断字符串中字符是否全部唯一使用正则表达式判断字符串中字符是否全部唯一使用正则表达式判断字符串中字符是否全部唯一

    本文介绍如何使用Java正则表达式来判断一个字符串中的所有字符是否都是唯一的。我们将探讨一种使用正则表达式检测字符串中是否存在重复字符的方法，并提供相应的Java代码示例。通过本文，你将学习如何利用正则表达式的强大功能来解决字符串处理中的常见问题。 在字符串处理中，经常需要判断一个字符串中的字符是否…

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

  • 获取物品名称并转换为字符串时出现乱码的解决方案

    获取物品名称并转换为字符串时出现乱码的解决方案获取物品名称并转换为字符串时出现乱码的解决方案获取物品名称并转换为字符串时出现乱码的解决方案获取物品名称并转换为字符串时出现乱码的解决方案

    本文旨在解决在 Minecraft Spigot 插件开发中，获取玩家放置的物品名称并尝试将其转换为字符串时出现乱码的问题。通过分析问题原因，并提供正确的代码示例，帮助开发者避免类似错误，从而更有效地获取玩家名称。 在 Spigot 插件开发中，当玩家放置方块时，我们可能需要获取该方块对应的玩家名称…

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

  • Bukkit插件开发：正确处理物品显示名称与玩家识别

    Bukkit插件开发：正确处理物品显示名称与玩家识别Bukkit插件开发：正确处理物品显示名称与玩家识别Bukkit插件开发：正确处理物品显示名称与玩家识别Bukkit插件开发：正确处理物品显示名称与玩家识别

    本文旨在解决Bukkit插件开发中，从BlockPlaceEvent获取物品显示名称并将其用于玩家识别时常见的“乱码”问题。我们将深入探讨Component对象与纯文本字符串的区别，并提供两种核心解决方案：直接获取放置方块的玩家名称，以及如何正确地将Component转换为纯文本字符串，以避免不必要…

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

  • sublime怎么折叠所有代码_sublime代码折叠快捷方法

    sublime怎么折叠所有代码_sublime代码折叠快捷方法sublime怎么折叠所有代码_sublime代码折叠快捷方法sublime怎么折叠所有代码_sublime代码折叠快捷方法sublime怎么折叠所有代码_sublime代码折叠快捷方法

    Sublime Text 支持多种代码折叠快捷键，Windows/Linux 使用 Ctrl + Shift + [/] 折叠/展开代码块，Ctrl + K, Ctrl + 1 展开所有用 Ctrl + K, Ctrl + J，macOS 用户将 Ctrl 替换为 Command。 在 Sublim…

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

  • sublime怎么实现sass/scss的自动编译_sublime配置SASS自动编译方法

    sublime怎么实现sass/scss的自动编译_sublime配置SASS自动编译方法sublime怎么实现sass/scss的自动编译_sublime配置SASS自动编译方法sublime怎么实现sass/scss的自动编译_sublime配置SASS自动编译方法sublime怎么实现sass/scss的自动编译_sublime配置SASS自动编译方法

    安装LiveSassCompiler插件并配置路径后，保存SCSS文件可自动编译为CSS。1. 通过Package Control安装插件；2. 设置输入输出路径；3. 保存文件触发编译，提升开发效率。 Sublime Text 要实现 SASS/SCSS 的自动编译，可以通过安装插件并配置构建系统…

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

  • 解析音调调整指令：一个Java教程

    解析音调调整指令：一个Java教程解析音调调整指令：一个Java教程解析音调调整指令：一个Java教程解析音调调整指令：一个Java教程

    本文旨在提供一个清晰易懂的Java教程，用于解析包含音调调整指令的字符串。通过使用正则表达式，我们可以从复杂的输入字符串中提取乐器名称、调整方向和调整量。本教程将详细解释代码实现，并提供示例，帮助读者理解如何在Java中处理这类问题。 使用正则表达式解析音调调整指令 在音乐领域，音调的微调至关重要。…

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

  • Java字符串高级解析：使用正则表达式处理复杂指令模式

    Java字符串高级解析：使用正则表达式处理复杂指令模式Java字符串高级解析：使用正则表达式处理复杂指令模式Java字符串高级解析：使用正则表达式处理复杂指令模式Java字符串高级解析：使用正则表达式处理复杂指令模式

    本教程演示如何使用Java的java.util.regex包，通过正则表达式高效解析包含多条调音指令的复杂字符串。我们将学习构建匹配特定模式的正则表达式，并利用Pattern和Matcher类从输入字符串中准确提取乐器名称、调音方向和数值，从而将原始指令转换为清晰可读的输出格式。 1. 问题背景与挑…

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

  • Java中整数类型溢出行为详解：二进制补码与循环特性

    Java中整数类型溢出行为详解：二进制补码与循环特性Java中整数类型溢出行为详解：二进制补码与循环特性Java中整数类型溢出行为详解：二进制补码与循环特性Java中整数类型溢出行为详解：二进制补码与循环特性

    Java中原始整数类型在处理超出其范围的数值时，会遵循一种基于二进制补码的循环溢出机制。这意味着当正数溢出时会“回卷”为负数，反之亦然，如同数字在一个有限的圆环上循环。理解这一特性对于准确预测类型转换和算术运算结果至关重要。 计算机中的数值表示：位、字节与二进制 在计算机底层，所有数据都以二进制形式…

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

  • Java数据类型溢出：原理、预测与避免

    Java数据类型溢出：原理、预测与避免Java数据类型溢出：原理、预测与避免Java数据类型溢出：原理、预测与避免Java数据类型溢出：原理、预测与避免

    本文旨在深入解析Java中数据类型溢出的现象，阐述其背后的二进制补码原理，并提供预测溢出结果的方法。通过理解数据在计算机中的存储方式，以及溢出时数值的循环特性，开发者可以更好地掌握Java中的数据类型，避免潜在的错误。 数据在计算机中的存储：二进制补码 计算机底层使用二进制（bits）来表示所有数据…

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

发表回复

登录后才能评论
关注微信