jQuery实现多表格连续数据高亮与跨表值提取教程-html教程-PHP中文网

jQuery实现多表格连续数据高亮与跨表值提取教程

本教程详细讲解如何使用jquery实现用户输入值在html表格中及其后续连续值的动态高亮显示，并进一步实现跨表格查找第三个相关值并将其提取到指定输入框的功能。通过状态变量和`$.each()`方法，确保了复杂逻辑的准确执行。

引言

在现代Web应用中，动态数据显示和用户交互是不可或缺的一部分。其中一个常见需求是根据用户的输入，在表格中查找并高亮显示匹配的数据。更进一步，有时我们需要不仅高亮匹配项，还要高亮其后的一个或多个连续值，甚至这些连续值可能分布在不同的表格中，并将特定位置的值提取出来。本文将详细介绍如何使用jQuery解决这一复杂场景，实现输入值、其后的第一个值和第二个值（可能跨表格）的动态高亮，并将第三个值填充到指定的输入框中。

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：用户输入搜索值的文本框。
#le10 和 #le11：两个独立的表格，包含待搜索的数据。
#nb：用于显示第三个（“Next Basic”）值的文本框。

CSS样式定义

为了清晰地区分匹配项及其后续连续项，我们将定义三种不同的CSS高亮样式。

.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;
}

登录后复制

.highlight：用于精确匹配的单元格。
.highlight2：用于匹配项后的第一个连续单元格。
.highlight3：用于匹配项后的第二个连续单元格。

核心JavaScript逻辑实现

实现此功能的关键在于有效地遍历所有相关的表格单元格，并在找到匹配项后，通过状态变量跟踪后续的两个连续项。

事件监听与入口函数

我们首先在文档加载完成后，为搜索输入框（#cb）绑定change和keyup事件。这样，当用户输入值或按下键盘时，都会触发搜索逻辑。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

$(document).ready(function() {
  $('#cb').on('change keyup', function() {
    var search = $(this).val(); // 获取用户输入值
    searchText(search);         // 调用核心搜索函数
  });
});

登录后复制

searchText 函数详解

searchText 函数是整个逻辑的核心。它负责遍历所有表格单元格，判断是否匹配，并根据匹配状态进行高亮和值提取。

function searchText(search) {
  // 初始化高亮计数器。当找到匹配项时，设置为2，表示接下来还需要高亮两个连续项。
  var highlightCount = 0; 

  // 遍历 #le10 和 #le11 中所有的 `td` 元素。
  // 选择 $.each() 而非 $.filter() 是因为我们需要在遍历过程中维护一个状态 (highlightCount)，
  // 并且需要对每个元素执行不同的操作，而 $.filter() 仅用于筛选元素。
  $('#le10 tr td, #le11 tr td').each(function() {
    // 1. 检查当前单元格是否与搜索值精确匹配
    if ($(this).text() == search) {
      // 找到匹配元素
      // 清空“Next Basic”输入框的值，准备填充新的结果
      $('#nb').val(''); 
      // 为匹配的单元格所在的行添加第一个高亮样式
      $(this).parent('tr').addClass('highlight');
      // 设置计数器为2，表示接下来需要高亮两个连续元素
      highlightCount = 2;
    } 
    // 2. 如果 highlightCount 为 2，表示当前单元格是匹配项后的第一个连续项
    else if (highlightCount == 2) {
      // 为当前单元格所在的行添加第二个高亮样式
      $(this).parent('tr').addClass('highlight2');
      // 计数器减1，表示还需要高亮一个连续元素
      highlightCount--;
    } 
    // 3. 如果 highlightCount 为 1，表示当前单元格是匹配项后的第二个连续项
    else if (highlightCount == 1) {
      // 将当前单元格的文本值填充到“Next Basic”输入框中
      $('#nb').val($(this).text());
      // 为当前单元格所在的行添加第三个高亮样式
      $(this).parent('tr').addClass('highlight3');
      // 计数器减1，表示高亮序列已完成
      highlightCount--;
    } 
    // 4. 对于其他所有不符合上述条件的单元格，移除所有高亮样式
    else {
      $(this).parent('tr').removeClass('highlight highlight2 highlight3');
    }
  });
}

登录后复制

关键点解释：

highlightCount 状态变量： 这是实现连续高亮的核心。当找到精确匹配项时，highlightCount被设置为2。在随后的迭代中，它会递减，直到0，从而准确地标识出匹配项及其后的两个连续项。
$('#le10 tr td, #le11 tr td').each(function() { ... });： 这一选择器组合允许我们同时遍历两个表格中的所有单元格。$.each()方法提供了对每个元素的上下文访问，这对于基于前一个元素状态进行操作至关重要。
样式清除： 在每次搜索开始时，$('#nb').val('')会清空旧的“Next Basic”值。更重要的是，else分支确保了所有不属于当前高亮序列的单元格都会被移除高亮样式，避免了旧的高亮残留。

完整示例

将上述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-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        input[type="text"] {
            padding: 5px;
            margin-bottom: 10px;
        }
    </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 td, #le11 tr td').each(function() {
    if ($(this).text() == search) {
      $('#nb').val('');
      $(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());
      $(this).parent('tr').addClass('highlight3');
      highlightCount--;
    } else {
      $(this).parent('tr').removeClass('highlight highlight2 highlight3');
    }
  });
}
</script>

</body>
</html>

登录后复制

注意事项与最佳实践

$.each() 与 $.filter() 的选择： 当你需要基于迭代过程中的状态或上下文对元素执行不同操作时，$.each()是更合适的选择。$.filter()主要用于根据特定条件筛选出一组元素。
状态管理： 在处理复杂序列逻辑时，像highlightCount这样的状态变量是至关重要的。它允许你在遍历过程中“记住”之前的操作，并据此决定下一步的行为。
样式清除： 确保在每次新的搜索操作开始时，清除所有旧的高亮样式。这可以通过在searchText函数开头移除所有相关类，或者像本例中那样，在else分支中处理非高亮元素来实现。
数据类型匹配： 本教程中直接比较了$(this).text()和search。如果表格中的数据是数值类型，而search也期望是数值，建议在比较前进行类型转换（例如parseInt($(this).text()) == parseInt(search)），以避免潜在的字符串比较问题。
性能考量： 对于包含大量行和列的超大型表格，频繁的DOM操作可能会影响性能。在这种情况下，可以考虑更高级的优化技术，如虚拟滚动、批量DOM更新或使用Web Worker处理搜索逻辑。

总结

本教程详细展示了如何利用jQuery实现一个功能强大的表格数据高亮和值提取方案。通过巧妙地结合$.each()遍历方法和highlightCount状态变量，我们成功地解决了在多表格环境中查找特定值及其后续连续值，并将其中的第三个值提取出来的复杂需求。这种方法不仅逻辑清晰，而且具有良好的可扩展性，可以根据实际需求调整高亮连续值的数量。

以上就是jQuery实现多表格连续数据高亮与跨表值提取教程的详细内容，更多请关注php中文网其它相关文章！