本教程详细介绍了如何使用 jquery 在多个 html 表格中查找用户输入的值，并对其匹配项及其后续两个连续值进行不同样式的高亮显示。通过引入一个状态计数器 `highlightcount`，我们能有效管理搜索和高亮逻辑，同时将第三个高亮值动态更新到一个指定的输入框中，实现跨表格数据的智能交互。
在现代 Web 应用中，用户经常需要从大量表格数据中快速定位特定信息。更进一步的需求可能包括不仅高亮匹配项，还要高亮其上下文或连续的几个相关数据点。本教程将展示如何利用 jquery 实现一个功能，允许用户在一个输入框中键入值，系统随后在两个独立的 html 表格中搜索该值，并高亮显示匹配项及其紧随的两个值，同时将第三个高亮值填充到另一个输入框中。
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>- #cb: 用户输入搜索值的文本框。
- #nb: 显示第三个高亮值的文本框。
- #le10 和 #le11: 两个独立的表格，包含待搜索的数据。我们将在这两个表格的所有 <td> 元素中进行搜索。
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;}javaScript 核心逻辑
实现连续高亮的关键在于遍历所有潜在的匹配元素，并使用一个状态变量来跟踪当前是否已找到匹配项，以及还需要高亮多少个后续项。
事件 绑定与搜索函数
我们使用 jQuery 的 $(document).ready()确保 dom 加载完成后再执行脚本。$(‘#cb’).on(‘change keyup’, function() { …}) 监听用户在 #cb 输入框中的 change 和 keyup 事件，确保每次输入或内容改变时都能触发搜索。搜索逻辑被 封装 在 searchText(search)函数中。
$(document).ready(function() {$('#cb').on('change keyup', function() {var search = $(this).val(); searchText(search); }); });searchText 函数详解
searchText 函数是实现核心功能的关键。它负责遍历所有相关的表格单元格，判断是否匹配，并根据状态进行高亮。
function searchText(search) {// 初始化高亮计数器 var highlightCount = 0; // 遍历所有可能的表格单元格 $('#le10 tr td, #le11 tr td').each(function() {// 清除所有现有高亮，为本次搜索做准备 $(this).parent('tr').removeClass('highlight highlight2 highlight3'); if ($(this).text() == search) {// 1. 找到匹配元素 // 重置 Next Basic 值 $('#nb').val(''); // 高亮匹配单元格，并设置高亮计数器为 2 $(this).parent('tr').addClass('highlight'); highlightCount = 2; // 表示接下来还需要高亮两个元素 } else if (highlightCount == 2) {// 2. 匹配元素的下一个单元格 // 高亮该单元格，并递减高亮计数器 $(this).parent('tr').addClass('highlight2'); highlightCount--; // 还需要高亮一个元素 } else if (highlightCount == 1) {// 3. 匹配元素的下下个单元格 // 将该单元格的值设置到 Next Basic 输入框 $('#nb').val($(this).text()); // 高亮该单元格，并递减高亮计数器 $(this).parent('tr').addClass('highlight3'); highlightCount--; // 所有高亮完成 } // else {// // 其他单元格（非匹配项、非后续项）保持无高亮状态 // // 在循环开始时已统一移除高亮，这里无需额外处理 //} }); }关键点解析：
- highlightCount 变量： 这是一个状态管理变量。
- 0: 默认状态，表示当前没有需要高亮的后续元素。
- 2: 找到匹配项后，表示需要高亮其后的两个元素。
- 1: 已高亮一个后续元素，表示还需要高亮一个。
- $(‘#le10 tr td, #le11 tr td’).each(function() {…})：
- 高亮逻辑：
- 初始匹配： 当 $(this).text() == search 成立时，说明找到了用户输入的值。此时，将当前行的父级 <tr> 添加 highlight 类，并将 highlightCount 设置为 2。同时，清除 #nb 的值。
- 第一个后续： 如果 highlightCount 为 2，表示当前元素是匹配项的第一个后续元素。将其父级 <tr> 添加 highlight2 类，并将 highlightCount 减为 1。
- 第二个后续： 如果 highlightCount 为 1，表示当前元素是匹配项的第二个后续元素。将其父级 <tr> 添加 highlight3 类，将该单元格的文本内容设置到 #nb 输入框中，并将 highlightCount 减为 0。
- 其他元素： 在每次迭代开始时，我们统一移除了当前单元格所在行的所有高亮类。这意味着只有满足上述高亮条件的元素才会被重新添加高亮类，其他不相关的元素将保持正常样式。
完整代码示例
将上述 HTML、CSS 和 javascript 代码组合，即可实现所需功能。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 实现跨表格连续值高亮与动态更新 </title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <style> .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;} /* 简单美化表格样式 */ table {border-collapse: collapse; width: 100%; margin-bottom: 15px;} th, td {border: 1px solid #ddd; padding: 8px; text-align: left;} th {background-color: #f2f2f2;} .container {margin-bottom: 20px;} .form-control {padding: 5px; border: 1px solid #ccc; border-radius: 4px;} </style> </head> <body> <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> <script> $(document).ready(function() {$('#cb').on('change keyup', function() {var search = $(this).val(); searchText(search); }); }); function searchText(search) {var highlightCount = 0; // 清除所有现有高亮，为本次搜索做准备 $('#le10 tr, #le11 tr').removeClass('highlight highlight2 highlight3'); $('#le10 tr td, #le11 tr td').each(function() {if ($(this).text() == search) {$('#nb').val(''); // 重置 Next Basic 值 $(this).parent('tr').addClass('highlight'); highlightCount = 2; } else if (highlightCount == 2) {$(this).parent('tr').addClass('highlight2'); highlightCount--; } else if (highlightCount == 1) {$('#nb').val($(this).text()); // 设置 Next Basic 值 $(this).parent('tr').addClass('highlight3'); highlightCount--; } }); } </script> </body> </html>注意事项：
- $(this).parent(‘tr’)： 在这个例子中，高亮样式是应用于 <tr> 元素而不是 <td> 元素。如果需要高亮 <td> 本身，可以直接使用 $(this).addClass(…)。
- 清除高亮： 为了确保每次搜索结果的准确性，在 searchText 函数开始时，我们统一清除了所有可能的现有高亮样式。$(‘#le10 tr, #le11 tr’).removeClass(‘highlight highlight2 highlight3’); 这一行确保了这一点。
- DOM 遍历顺序： $(‘#le10 tr td, #le11 tr td’) 会按照它们在 HTML 文档中出现的顺序进行遍历。这意味着即使第二个高亮值在第一个表格中，而第三个高亮值在第二个表格中，只要它们在合并后的 jQuery 选择器结果中是连续的，逻辑也能正确处理。
- 数据类型 ： 示例中假设表格单元格内容是纯文本数字。如果包含其他字符或需要数值比较，可能需要进行 类型转换（例如 parseInt($(this).text())）。
- 性能考虑： 对于包含成千上万个单元格的巨大表格，频繁的 DOM 操作可能会影响性能。在这种情况下，可以考虑使用虚拟滚动、数据分页或更优化的搜索 算法。
总结
本教程展示了如何使用 jQuery 的 each()方法和自定义状态变量 highlightCount 来解决在多个 HTML 表格中进行连续值高亮和动态数据更新的问题。这种模式在处理需要上下文关联或序列化操作的 ui 交互时非常有用，例如显示搜索结果的相邻项、分层导航等。通过清晰的 HTML 结构、明确的 css 样式 和结构化的 JavaScript 逻辑，我们能够构建出高效且用户友好的 前端 功能。
