本教程旨在指导开发者如何使用 jQuery 实现一个交互式表格，当用户在输入框中输入内容时，表格中匹配的单元格以及紧随其后的单元格会被高亮显示。我们将详细讲解代码实现，并提供可直接运行的示例，帮助你快速掌握该技巧。
1. HTML 结构
首先，我们需要一个包含输入框和表格的 HTML 结构。输入框用于接收用户的输入，表格则用于显示数据并进行高亮。
<div class="container"> <div class="row"> <div class="col-md-6"> <label for="">Basic</label> <input class="form-control" type="text" name="cb" id="cb" autocomplete="off" /> </div> </div> </div> <table class="table table-responsive"> <tr> <td> <h6>Current Level</h6> </td> </tr> <tr> <td> <table id="le10" class="table table-responsive table-striped"> <tr> <td>56100</td> </tr> <tr> <td>57800</td> </tr> <tr> <td>59500</td> </tr> <tr> <td>61300</td> </tr> <tr> <td>63100</td> </tr> <tr> <td>65000</td> </tr> <tr> <td>67000</td> </tr> <tr> <td>69000</td> </tr> <tr> <td>71100</td> </tr> <tr> <td>73200</td> </tr> <tr> <td>75400</td> </tr> <tr> <td>77700</td> </tr> </table> </td> </tr> </table>
这里使用了 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 类用于高亮紧随其后的单元格。可以根据实际需求调整颜色和样式。
表单大师AI
74
一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。
74
查看详情
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. 完整代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Table Highlight</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.highlight {
color: red;
background-color: yellow;
font-weight: bold;
}
.highlight2 {
color: blue;
background-color: greenyellow;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<label for="">Basic</label>
<input class="form-control" type="text" name="cb" id="cb" autocomplete="off" />
</div>
</div>
</div>
<table class="table table-responsive">
<tr>
<td>
<h6>Current Level</h6>
</td>
</tr>
<tr>
<td>
<table id="le10" class="table table-responsive table-striped">
<tr>
<td>56100</td>
</tr>
<tr>
<td>57800</td>
</tr>
<tr>
<td>59500</td>
</tr>
<tr>
<td>61300</td>
</tr>
<tr>
<td>63100</td>
</tr>
<tr>
<td>65000</td>
</tr>
<tr>
<td>67000</td>
</tr>
<tr>
<td>69000</td>
</tr>
<tr>
<td>71100</td>
</tr>
<tr>
<td>73200</td>
</tr>
<tr>
<td>75400</td>
</tr>
<tr>
<td>77700</td>
</tr>
</table>
</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(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');
}
})
});
});
</script>
</body>
</html>
5. 注意事项和总结
- 确保引入 jQuery 库。
- 可以根据实际需求调整 CSS 样式和 jQuery 代码。
- 如果表格数据量很大，可以考虑优化代码性能，例如使用缓存或节流函数。
- closest(‘tr’) 用于确保我们找到的是同一个表格内的下一个tr，避免在嵌套表格中出现错误。
- 使用 change keyup 事件可以实时响应用户的输入。
通过本教程，你应该能够掌握如何使用 jQuery 高亮 HTML 表格中匹配的单元格及其相邻单元格。这个技巧可以应用于各种交互式表格应用中，提升用户体验。
相关标签：
css jquery html js bootstrap 回调函数 ai cdn red asic jquery css bootstrap html if Filter 回调函数 var function 事件 dom this table td tr
大家都在看：
怎么用HTML插入内容折叠功能_HTML+CSS折叠面板
如何用HTML插入折叠面板_HTML details标签与CSS自定义样式
如何在HTML中插入图片轮播组件_HTML轮播图CSS实现
CSS背景图全屏覆盖：解决图片无法铺满整个视口的问题
JavaScript动态为下拉选项生成内容中的价格div添加CSS类
如何用HTML插入折叠面板_HTML details标签与CSS自定义样式
如何在HTML中插入图片轮播组件_HTML轮播图CSS实现
CSS背景图全屏覆盖：解决图片无法铺满整个视口的问题
JavaScript动态为下拉选项生成内容中的价格div添加CSS类
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容