本教程旨在指导开发者如何使用 jQuery 实现一个交互式表格，当用户在输入框中输入内容时，表格中匹配的单元格以及紧随其后的单元格会被高亮显示。我们将详细讲解代码实现，并提供可直接运行的示例，帮助你快速掌握该技巧。
1. HTML 结构
首先，我们需要一个包含输入框和表格的 HTML 结构。输入框用于接收用户的输入，表格则用于显示数据并进行高亮。
Current Level | ||||||||||||
|
这里使用了 Bootstrap 的 CSS 类来增强页面美观性和响应式。
2. CSS 样式
接下来，定义用于高亮单元格的 CSS 类。
立即学习“前端免费学习笔记（深入）”；
.highlight { color: red; background-color: yellow; font-weight: bold;}.highlight2 { color: blue; background-color: greenyellow; font-weight: bold;}
highlight 类用于高亮匹配的单元格，highlight2 类用于高亮紧随其后的单元格。可以根据实际需求调整颜色和样式。
3. jQuery 代码
这是实现核心功能的 jQuery 代码：
$(function () { $('#cb').on('change keyup', function() { var search = $(this).val(); $('table tr td').filter(function() { if($(this).text() == search){ $(this).parent('tr').addClass('highlight'); $(this).parent('tr').closest('tr').next().addClass('highlight2'); }else{ $(this).parent('tr').removeClass('highlight'); $(this).parent('tr').closest('tr').next().removeClass('highlight2'); } }) });});
这段代码的功能如下：
$(function() { … });: 确保在 DOM 加载完成后执行代码。$(‘#cb’).on(‘change keyup’, function() { … });: 监听 id 为 cb 的输入框的 change 和 keyup 事件。这意味着每次输入框的值发生变化（无论是通过键盘输入还是其他方式），都会触发该函数。var search = $(this).val();: 获取输入框的值并存储在 search 变量中。$(‘table tr td’).filter(function() { … });: 选择所有表格中的 td 元素，并使用 filter() 方法进行筛选。filter() 方法允许我们根据自定义的条件选择元素。if($(this).text() == search){ … }: 在 filter() 方法的回调函数中，检查当前 td 元素的文本内容是否与输入框的值 search 相等。$(this).parent(‘tr’).addClass(‘highlight’);: 如果 td 元素的文本内容与输入框的值相等，则为该 td 元素的父元素 tr 添加 highlight 类，实现高亮效果。$(this).parent(‘tr’).closest(‘tr’).next().addClass(‘highlight2’);: 找到当前td的父tr，然后使用closest(‘tr’)确保我们仍然在同一个tr元素上，接着使用next()方法选择紧随其后的tr元素，并为其添加highlight2类，实现高亮相邻单元格的效果。else{ … }: 如果 td 元素的文本内容与输入框的值不相等，则移除 highlight 和 highlight2 类，取消高亮效果。
4. 完整代码示例
jQuery Table Highlight .highlight { color: red; background-color: yellow; font-weight: bold; } .highlight2 { color: blue; background-color: greenyellow; font-weight: bold; }
Current Level | ||||||||||||
|
5. 注意事项和总结
确保引入 jQuery 库。可以根据实际需求调整 CSS 样式和 jQuery 代码。如果表格数据量很大，可以考虑优化代码性能，例如使用缓存或节流函数。closest(‘tr’) 用于确保我们找到的是同一个表格内的下一个tr，避免在嵌套表格中出现错误。使用 change keyup 事件可以实时响应用户的输入。
通过本教程，你应该能够掌握如何使用 jQuery 高亮 HTML 表格中匹配的单元格及其相邻单元格。这个技巧可以应用于各种交互式表格应用中，提升用户体验。
以上就是使用 jQuery 高亮 HTML 表格单元格及其相邻单元格的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589205.html
微信扫一扫 
支付宝扫一扫 
