本教程详细介绍了如何使用jquery实现一个动态功能：当用户在输入框中输入一个值时，系统会在两个html表格中查找该值，并将其以及紧随其后的两个连续值（即使跨越不同表格）分别高亮显示。同时，第三个高亮值会被自动填充到另一个输入框中，实现前端数据的联动展示。
在Web开发中，我们经常需要根据用户的输入动态地更新页面内容，例如高亮显示匹配项或填充相关数据。当这些数据分散在多个HTML元素（如不同的表格）中，并且需要处理连续的匹配逻辑时，实现起来会稍微复杂。本教程将通过一个具体的示例，展示如何利用jQuery的迭代能力和状态管理来解决这类问题。
场景描述
假设我们有两个并列的HTML表格（le10 和 le11），其中包含一系列数值。用户在一个名为 “BASIC” 的输入框中输入一个值。我们的目标是：
高亮显示 用户输入的值（红色）。高亮显示 紧随用户输入值之后的第一个值（蓝色）。高亮显示 紧随第二个高亮值之后的第三个值（绿色）。将第三个高亮值自动填充到 “Next Basic” 输入框中。
值得注意的是，这三个连续的值可能分布在同一个表格内，也可能跨越 le10 和 le11 两个表格。
HTML 结构
首先，我们需要构建基础的HTML页面，包括输入框和两个数据表格。
Basic
Current Level | Next Level | Next Basic | |||||||||||
|
| Next Basic |
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 上的所有高亮类，以清除旧的高亮效果。
完整 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逻辑进行处理。这种模式对于构建复杂的数据展示和交互界面非常有用。
以上就是jQuery实现跨表格连续值高亮与数据联动教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589816.html
微信扫一扫 
支付宝扫一扫 
