当前位置：首页 > 文章列表 > 文章 > 前端 > jQuery连续值高亮与联动实现教程

jQuery连续值高亮与联动实现教程

2025-11-06 09:09:35 0浏览收藏

大家好，今天本人给大家带来文章《jQuery跨表格连续值高亮与联动教程》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

jQuery实现跨表格连续值高亮与数据联动教程

本教程详细介绍了如何使用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>&lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;cb&quot; id=&quot;cb&quot; autocomplete=&quot;off&quot; /&gt;</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&lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;nb&quot; id=&quot;nb&quot; /&gt;

    </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 上的所有高亮类，以清除旧的高亮效果。

完整 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连续值高亮与联动实现教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！