利用jQuery实现表格行点击高亮效果-html教程-PHP中文网

利用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树，找到该按钮所属的最近的

科威旅游管理系统源码
系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

150

查看详情
元素，然后对其应用高亮样式。
代码实现

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

HTML 结构

表格的HTML结构保持不变，但需要移除按钮上的 onclick="selectRow();" 属性。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="datatablesSimple"> <thead> <tr> <th>Solicitor</th> <th>End Date</th> <th>Days to Go</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>Dummy1</td> <td>2022-10-20</td> <td>4</td> <td><input type="button" class="btn btn-danger btn-sm" id="deac" value="Deactivate"/></td> </tr> <tr> <td>Dummy2</td> <td>2022-4-26</td> <td>200</td> <td><input type="button" class="btn btn-danger btn-sm" id="deac" value="Deactivate"/></td> </tr>  </tbody> </table>
登录后复制
JavaScript (jQuery)

将事件绑定逻辑放置在文档加载完成后执行，确保DOM元素已准备就绪。
$(document).ready(function() { // 为所有类型为 'button' 的 input 元素绑定点击事件 $('input[type="button"]').on('click', function() { // 移除所有行可能存在的高亮样式，确保每次只有一个行被高亮 // 或者只针对当前点击的行进行操作，这取决于具体需求 // 如果需要每次点击都取消之前的高亮，可以添加以下行： // $('#datatablesSimple tbody tr').css('background-color', ''); // 获取被点击按钮的最近父级 <tr> 元素，并设置背景色 $(this).closest('tr').css('background-color', 'red'); }); });
登录后复制
完整示例代码

将上述HTML和JavaScript结合起来，即可实现所需功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格行高亮示例</title> <style> /* 可以选择使用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; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="datatablesSimple"> <thead> <tr> <th>Solicitor</th> <th>End Date</th> <th>Days to Go</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>Dummy1</td> <td>2022-10-20</td> <td>4</td> <td><input type="button" class="btn btn-danger btn-sm" value="Deactivate"/></td> </tr> <tr> <td>Dummy2</td> <td>2022-4-26</td> <td>200</td> <td><input type="button" class="btn btn-danger btn-sm" value="Deactivate"/></td> </tr> <tr> <td>Dummy3</td> <td>2023-01-15</td> <td>-100</td> <td><input type="button" class="btn btn-danger btn-sm" value="Deactivate"/></td> </tr> </tbody> </table> <script> $(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'); }); }); </script> </body> </html>
登录后复制
注意事项与最佳实践

避免使用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应用。掌握这些技术将有助于开发者更好地控制页面交互和用户体验。