本教程旨在指导开发者如何使用 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
Current Level |
||||||||||||
|
5. 注意事项和总结
- 确保引入 jQuery 库。
- 可以根据实际需求调整 CSS 样式和 jQuery 代码。
- 如果表格数据量很大，可以考虑优化代码性能，例如使用缓存或节流函数。
- closest('tr') 用于确保我们找到的是同一个表格内的下一个tr，避免在嵌套表格中出现错误。
- 使用 change keyup 事件可以实时响应用户的输入。
通过本教程，你应该能够掌握如何使用 jQuery 高亮 HTML 表格中匹配的单元格及其相邻单元格。这个技巧可以应用于各种交互式表格应用中，提升用户体验。
