本教程详细介绍了如何使用jquery实现一个动态功能：当用户在输入框中输入一个值时，系统会在两个html表格中查找该值，并将其以及紧随其后的两个连续值（即使跨越不同表格）分别高亮显示。同时，第三个高亮值会被自动填充到另一个输入框中，实现前端数据的联动展示。
在Web开发中，我们经常需要根据用户的输入动态地更新页面内容，例如高亮显示匹配项或填充相关数据。当这些数据分散在多个HTML元素（如不同的表格）中，并且需要处理连续的匹配逻辑时，实现起来会稍微复杂。本教程将通过一个具体的示例，展示如何利用jQuery的迭代能力和状态管理来解决这类问题。
场景描述
假设我们有两个并列的HTML表格（le10 和 le11），其中包含一系列数值。用户在一个名为 "BASIC" 的输入框中输入一个值。我们的目标是：
- 高亮显示 用户输入的值（红色）。
- 高亮显示 紧随用户输入值之后的第一个值（蓝色）。
- 高亮显示 紧随第二个高亮值之后的第三个值（绿色）。
- 将第三个高亮值自动填充到 "Next Basic" 输入框中。
值得注意的是，这三个连续的值可能分布在同一个表格内，也可能跨越 le10 和 le11 两个表格。
HTML 结构
首先，我们需要构建基础的HTML页面，包括输入框和两个数据表格。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<table width="100%" border="0">
<tr>
<td>Basic</td>
<td><input class="form-control" type="text" name="cb" id="cb" autocomplete="off" /></td>
</tr>
</table>
</div>
</div>
</div>
<table class="table table-responsive">
<tr>
<td>
<h6>Current Level</h6>
</td>
<td>
<h6>Next Level</h6>
</td>
<td>
<h6>Next Basic</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>
</table>
</td>
<td>
<table id="le11" class="table table-responsive table-striped">
<tr>
<td>67700</td>
</tr>
<tr>
<td>69700</td>
</tr>
<tr>
<td>71800</td>
</tr>
<tr>
<td>74000</td>
</tr>
</table>
</td>
<td>
Next Basic<input class="form-control" type="text" name="nb" id="nb" />
</td>
</tr>
</table>CSS 样式
为了实现不同的高亮效果，我们需要定义三个CSS类：highlight、highlight2 和 highlight3。
.highlight {
color: red;
background-color: yellow;
font-weight: bold;
}
.highlight2 {
color: blue;
background-color: greenyellow;
font-weight: bold;
}
.highlight3 {
color: green;
background-color: yellow;
font-weight: bold;
}jQuery 核心逻辑
实现这一功能的关键在于如何有效地遍历所有相关的表格单元格，并在找到匹配项后，能够识别并高亮其后的连续单元格。
初始尝试的局限性
直接使用 filter() 方法或依赖 next() 方法来跨越不同的表格 (#le10 和 #le11) 是困难的。filter() 主要用于筛选集合，而不是在迭代过程中维护状态并处理后续元素。而 next() 方法通常只在同一DOM层级中查找紧邻的兄弟元素，无法直接跨越表格结构。
采用 .each() 和状态变量
更健壮的方法是使用 each() 方法遍历所有潜在的单元格，并结合一个状态变量（例如 highlightCount）来跟踪当前是否需要高亮后续单元格。
- 事件绑定: 监听 "BASIC" 输入框 (#cb) 的 change 和 keyup 事件，确保用户输入或粘贴时都能触发搜索。
- searchText 函数: 将核心逻辑封装在一个函数中，便于调用和管理。
-
状态变量 highlightCount:
- 初始化为 0。
- 当找到用户输入的值时，将其设置为 2。
- 在每次迭代中，如果 highlightCount > 0，则表示需要高亮后续单元格，并递减 highlightCount。
- 这样，highlightCount 从 2 变为 1 再变为 0，正好对应了后续的两个单元格。
- 遍历所有单元格: 使用 $('#le10 tr td, #le11 tr td').each(function() { ... }) 组合选择器，确保遍历到两个表格中的所有 td 元素。
-
条件判断与高亮:
- 如果当前单元格的文本与 search 值匹配：
- 清除 "Next Basic" 输入框的值。
- 给当前单元格的父 tr 添加 highlight 类。
- 设置 highlightCount = 2。
- 如果 highlightCount 为 2（表示这是第一个后续单元格）：
- 给当前单元格的父 tr 添加 highlight2 类。
- highlightCount 递减为 1。
- 如果 highlightCount 为 1（表示这是第二个后续单元格）：
- 将当前单元格的文本填充到 "Next Basic" 输入框 (#nb)。
- 给当前单元格的父 tr 添加 highlight3 类。
- highlightCount 递减为 0。
- 否则（不匹配且不需要高亮后续单元格）：
- 移除当前单元格父 tr 上的所有高亮类，以清除旧的高亮效果。
- 如果当前单元格的文本与 search 值匹配：
完整 JavaScript 代码
$(document).ready(function() {
// 绑定事件到输入框，当内容改变或按键抬起时触发搜索
$('#cb').on('change keyup', function() {
var search = $(this).val(); // 获取用户输入的值
searchText(search); // 调用搜索函数
});
});
function searchText(search) {
// 移除所有之前的高亮，确保每次搜索都是新的状态
$('#le10 tr, #le11 tr').removeClass('highlight highlight2 highlight3');
$('#nb').val(''); // 清空 Next Basic 输入框
// 设置一个计数器，用于追踪需要高亮的后续单元格数量
// 2: 找到匹配项后的第一个后续单元格
// 1: 找到匹配项后的第二个后续单元格
// 0: 不需要高亮后续单元格
var highlightCount = 0;
// 遍历 #le10 和 #le11 两个表格中的所有 td 元素
$('#le10 tr td, #le11 tr td').each(function() {
// 检查当前单元格的文本是否与用户输入匹配
if ($(this).text() == search) {
// 找到匹配元素
// 给匹配元素的父 tr 添加第一个高亮样式
$(this).parent('tr').addClass('highlight');
// 设置计数器为2，表示接下来需要高亮两个连续单元格
highlightCount = 2;
} else if (highlightCount == 2) {
// 这是匹配元素后的第一个后续单元格
// 给其父 tr 添加第二个高亮样式
$(this).parent('tr').addClass('highlight2');
// 计数器递减
highlightCount--;
} else if (highlightCount == 1) {
// 这是匹配元素后的第二个后续单元格
// 将此单元格的文本填充到 'Next Basic' 输入框
$('#nb').val($(this).text());
// 给其父 tr 添加第三个高亮样式
$(this).parent('tr').addClass('highlight3');
// 计数器递减
highlightCount--;
}
// else 情况下，即 highlightCount 为 0 或负数，表示不需要高亮，
// 并且在函数开始时已经移除了所有高亮，所以这里不需要额外操作。
});
}注意事项与总结
- 清除旧高亮: 在 searchText 函数的开头，务必清除所有可能存在的旧高亮样式 ($('#le10 tr, #le11 tr').removeClass('highlight highlight2 highlight3');)。这确保了每次新的搜索都能呈现干净、准确的高亮效果。
- highlightCount 的作用: highlightCount 变量是实现连续高亮的关键。它在 each() 循环中充当一个状态机，指导程序在找到匹配项后如何处理接下来的元素。
- 组合选择器: $('#le10 tr td, #le11 tr td') 能够有效地将两个表格中的所有相关单元格收集到一个jQuery对象中，使得 each() 循环可以按文档顺序遍历它们，从而实现跨表格的连续性检测。
- 父元素高亮: 示例代码选择高亮 td 的父 tr 元素，这样可以使整行都突出显示。如果只需要高亮 td 本身，可以直接对 $(this) 添加类。
- 性能考虑: 对于非常大的表格（数千行），频繁的DOM操作可能会影响性能。在这种情况下，可以考虑使用虚拟滚动、延迟搜索或更优化的DOM更新策略。
通过上述方法，我们成功地实现了一个动态、交互式的表格数据高亮和联动功能，即使数据分布在多个HTML表格中，也能通过巧妙的JavaScript逻辑进行处理。这种模式对于构建复杂的数据展示和交互界面非常有用。
