投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. 好文分享

利用jQuery实现表格行点击高亮效果

程序猿 • • 好文分享 • 阅读 0

利用jquery实现表格行点击高亮效果

本教程旨在解决在HTML表格中，点击行内按钮时，仅高亮显示该行的问题。文章分析了常见的错误实现方式及其原因，并提供了一个基于jQuery的简洁高效解决方案。通过直接绑定事件、利用`$(this)`获取当前元素以及`closest()`方法进行DOM遍历，我们可以精确地实现目标行的背景色改变，避免重复绑定、全局高亮或双击才能生效的问题，从而提升用户体验和代码可维护性。

引言：动态表格行高亮的需求

在Web应用开发中，表格是展示数据的重要组件。为了增强用户交互和视觉反馈，我们常常需要实现一些动态效果，例如当用户点击表格行中的某个操作按钮时，能够高亮显示该行，以指示当前操作的对象。这对于管理系统中的“激活”、“禁用”或“删除”等操作尤为常见。然而，实现这一功能时，开发者可能会遇到一些挑战，如事件重复绑定、选择器范围不准确或作用于所有行而非特定行的问题。

常见问题与误区分析

在尝试实现表格行高亮时，开发者可能会遇到以下几种常见误区：

误区一：重复绑定与选择器局限

某些尝试可能在每次点击时都重新绑定事件，并且使用了限制性较强的选择器，例如 document.querySelector(“input[type=’button’]”)。

function selectRow() {  document.querySelector("input[type='button']").addEventListener('click', function() {    $(this).closest('tr').css('background-color', 'red');  });}

问题分析：

document.querySelector() 只会选择文档中第一个匹配的元素。这意味着即使表格中有多个按钮，也只有第一个按钮会被绑定事件。selectRow() 函数通过 onclick 属性在HTML中被调用。每次点击按钮时，该函数都会执行，导致事件监听器被重复绑定。这不仅浪费资源，还可能导致不可预测的行为。

误区二：事件重复触发与双击问题

另一种尝试可能使用jQuery的 .on() 方法，但同样在 onclick 属性中调用函数。

function selectRow() {  $('td input[type="button"]').on('click', function() {    $(this).closest('tr').css('background-color', 'red');  });}

问题分析：

与误区一类似，selectRow() 函数通过 onclick 属性在每次点击时都会被调用。每次调用 selectRow() 都会对所有匹配的按钮 ($(‘td input[type=”button”]’)) 重新绑定一次点击事件。当用户点击按钮时，由于事件被重复绑定了多次，可能需要多次点击（或看起来像双击）才能触发预期的效果，或者事件处理函数会执行多次。

误区三：全局操作而非局部

还有一种情况是试图通过遍历所有行来高亮，而不是仅高亮被点击按钮所在的行。

function selectRow() {  var tbl = document.querySelector("table tbody");  [...tbl.rows].forEach(el => {    el.classList.toggle('table-danger');  });}

问题分析：

此代码会获取表格 tbody 中所有的行。forEach 循环会遍历所有行，并为每一行切换 table-danger 类。结果是，无论点击哪个按钮，表格中的所有行都会被同时高亮或取消高亮，这显然不符合只高亮特定行的需求。

解决方案：利用jQuery实现精确行高亮

解决上述问题的关键在于：

移除HTML中的 onclick 属性，避免重复绑定事件。使用jQuery在文档加载完成后统一绑定事件。在事件处理函数中，利用 $(this) 引用被点击的元素，并通过DOM遍历方法 closest() 找到其最近的父级 元素。直接对目标 元素应用样式。

核心思路

我们只需要在页面加载完成后，为所有操作按钮绑定一次点击事件。当任何一个按钮被点击时，事件处理函数会接收到该事件，并通过 $(this) 获取到被点击的按钮元素。接着，利用jQuery的 closest(‘tr’) 方法，我们可以轻松地向上遍历DOM树，找到该按钮所属的最近的

元素，然后对其应用高亮样式。

代码实现

下面是实现这一功能的完整代码示例。

HTML 结构

表格的HTML结构保持不变，但需要移除按钮上的 onclick=”selectRow();” 属性。

      
      Solicitor      End Date      Days to Go      Action    
        
      Dummy1      2022-10-20      4          
    
      Dummy2      2022-4-26      200

JavaScript (jQuery)

将事件绑定逻辑放置在文档加载完成后执行，确保DOM元素已准备就绪。

$(document).ready(function() {  // 为所有类型为 'button' 的 input 元素绑定点击事件  $('input[type="button"]').on('click', function() {    // 移除所有行可能存在的高亮样式，确保每次只有一个行被高亮    // 或者只针对当前点击的行进行操作，这取决于具体需求    // 如果需要每次点击都取消之前的高亮，可以添加以下行：    // $('#datatablesSimple tbody tr').css('background-color', '');     // 获取被点击按钮的最近父级  元素，并设置背景色    $(this).closest('tr').css('background-color', 'red');  });});

完整示例代码

将上述HTML和JavaScript结合起来，即可实现所需功能。

            表格行高亮示例            /* 可以选择使用CSS类来管理高亮样式，而非直接操作style属性 */        .table-danger-highlight {            background-color: red !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 {            padding: 5px 10px;            border: none;            border-radius: 3px;            cursor: pointer;            color: white;        }        .btn-danger {            background-color: #dc3545;        }        .btn-sm {            font-size: 0.8em;        }    
      
      Solicitor      End Date      Days to Go      Action    
        
      Dummy1      2022-10-20      4          
    
      Dummy2      2022-4-26      200          
    
      Dummy3      2023-01-15      -100          
  
$(document).ready(function() {  $('input[type="button"]').on('click', function() {    // 方案一：直接设置背景色 (如本教程所示)    $(this).closest('tr').css('background-color', 'red');    // 方案二：更推荐的做法是切换CSS类，这样样式和行为分离更清晰    // 假设你有一个名为 .table-danger-highlight 的CSS类    // $(this).closest('tr').toggleClass('table-danger-highlight');    // 如果希望每次点击只高亮一行，且取消之前的高亮    // 可以先移除所有行的高亮，再为当前行添加    // $('#datatablesSimple tbody tr').removeClass('table-danger-highlight');    // $(this).closest('tr').addClass('table-danger-highlight');  });});

注意事项与最佳实践

避免使用HTML onclick 属性： 尽量将JavaScript行为与HTML结构分离。使用jQuery或原生JavaScript的 addEventListener 来绑定事件，可以提高代码的可维护性和可读性，并避免重复绑定等问题。

事件委托（Event Delegation）： 对于动态生成的表格内容（例如通过AJAX加载的数据），或者表格行数非常多时，为每个按钮单独绑定事件效率较低。此时，可以考虑使用事件委托，将事件监听器绑定到表格父元素（如

或 ），然后利用事件冒泡和 event.target 来判断是哪个按钮被点击。

$('#datatablesSimple tbody').on('click', 'input[type="button"]', function() {  $(this).closest('tr').css('background-color', 'red');});

这种方式只需一个事件监听器，就能处理所有当前及未来添加到表格中的按钮点击事件，性能更优。

使用CSS类管理样式： 直接通过 css() 方法修改元素的 style 属性虽然简单，但不利于样式管理和复用。更推荐的做法是定义一个CSS类（例如 .table-danger-highlight），然后使用 addClass() 和 removeClass() 或 toggleClass() 方法来添加或移除这个类。

.table-danger-highlight {  background-color: red !important; /* 使用!important确保覆盖默认样式 */}
$(this).closest('tr').addClass('table-danger-highlight');// 或者如果需要切换效果// $(this).closest('tr').toggleClass('table-danger-highlight');

单一高亮： 如果需求是每次点击只高亮一行，即点击新行时取消旧行的高亮，你需要在应用新高亮之前，先移除所有其他行的高亮样式。

$('input[type="button"]').on('click', function() {  // 移除所有行的高亮  $('#datatablesSimple tbody tr').css('background-color', '');   // 或者使用类：$('#datatablesSimple tbody tr').removeClass('table-danger-highlight');  // 高亮当前行  $(this).closest('tr').css('background-color', 'red');  // 或者使用类：$(this).closest('tr').addClass('table-danger-highlight');});

总结

通过本教程，我们学习了如何在HTML表格中，当点击行内的操作按钮时，精确地高亮显示该行。关键在于避免HTML onclick 属性的重复绑定问题，转而使用jQuery在文档加载完成后进行事件绑定，并利用 $(this) 和 closest(‘tr’) 进行精确的DOM元素定位。同时，我们也探讨了事件委托和使用CSS类管理样式等最佳实践，以构建更健壮、可维护和高性能的Web应用。掌握这些技术将有助于开发者更好地控制页面交互和用户体验。

以上就是利用jQuery实现表格行点击高亮效果的详细内容，更多请关注创想鸟其它相关文章！

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

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

关于作者

程序猿的头像

程序猿签约作者

404.6K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月23日 16:52:58
下一篇 2025年12月23日 16:53:16

相关推荐

发表回复

登录后才能评论
关注微信