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

<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>

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

$(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 或负数，表示不需要高亮，
    // 并且在函数开始时已经移除了所有高亮，所以这里不需要额外操作。
  });
}