本教程旨在指导开发者如何使用 jQuery 实现一个交互式表格，当用户在输入框中输入内容时，表格中匹配的单元格以及紧随其后的单元格会被高亮显示。我们将详细讲解代码实现，并提供可直接运行的示例，帮助你快速掌握该技巧。

1. HTML 结构

首先，我们需要一个包含输入框和表格的 HTML 结构。输入框用于接收用户的输入，表格则用于显示数据并进行高亮。

<div class="container">
    <div class="row">
      <div class="col-md-6">
        <label for="">Basic</label>
        <input class="form-control" type="text" name="cb" id="cb" autocomplete="off" />
      </div>
    </div>
  </div>
  <table class="table table-responsive">
    <tr>
      <td>
        <h6>Current Level</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>
          <tr>
            <td>69000</td>
          </tr>
          <tr>
            <td>71100</td>
          </tr>
          <tr>
            <td>73200</td>
          </tr>
          <tr>
            <td>75400</td>
          </tr>
          <tr>
            <td>77700</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

这里使用了 Bootstrap 的 CSS 类来增强页面美观性和响应式。

2. CSS 样式

接下来，定义用于高亮单元格的 CSS 类。

立即学习“前端免费学习笔记（深入）”；

cn-json-diff

比较两个 JSON 文件并显示差异。支持嵌套结构、数组及值变更。纯 Python 标准库实现，无需 API 密钥。

下载

.highlight {
  color: red;
  background-color: yellow;
  font-weight: bold;
}
.highlight2 {
  color: blue;
  background-color: greenyellow;
  font-weight: bold;
}

highlight 类用于高亮匹配的单元格，highlight2 类用于高亮紧随其后的单元格。可以根据实际需求调整颜色和样式。

3. jQuery 代码

这是实现核心功能的 jQuery 代码：

$(function () {
  $('#cb').on('change keyup', function() {
    var search = $(this).val();
    $('table tr td').filter(function() {
        if($(this).text() == search){
          $(this).parent('tr').addClass('highlight');
          $(this).parent('tr').closest('tr').next().addClass('highlight2');
        }else{
          $(this).parent('tr').removeClass('highlight');
          $(this).parent('tr').closest('tr').next().removeClass('highlight2');
        }
    })
  });
});

这段代码的功能如下：

• $(function() { ... });: 确保在 DOM 加载完成后执行代码。
• $('#cb').on('change keyup', function() { ... });: 监听 id 为 cb 的输入框的 change 和 keyup 事件。这意味着每次输入框的值发生变化（无论是通过键盘输入还是其他方式），都会触发该函数。
• var search = $(this).val();: 获取输入框的值并存储在 search 变量中。
• $('table tr td').filter(function() { ... });: 选择所有表格中的 td 元素，并使用 filter() 方法进行筛选。filter() 方法允许我们根据自定义的条件选择元素。
• if($(this).text() == search){ ... }: 在 filter() 方法的回调函数中，检查当前 td 元素的文本内容是否与输入框的值 search 相等。
• $(this).parent('tr').addClass('highlight');: 如果 td 元素的文本内容与输入框的值相等，则为该 td 元素的父元素 tr 添加 highlight 类，实现高亮效果。
• $(this).parent('tr').closest('tr').next().addClass('highlight2');: 找到当前td的父tr，然后使用closest('tr')确保我们仍然在同一个tr元素上，接着使用next()方法选择紧随其后的tr元素，并为其添加highlight2类，实现高亮相邻单元格的效果。
• else{ ... }: 如果 td 元素的文本内容与输入框的值不相等，则移除 highlight 和 highlight2 类，取消高亮效果。

4. 完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Table Highlight</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .highlight {
          color: red;
          background-color: yellow;
          font-weight: bold;
        }
        .highlight2 {
          color: blue;
          background-color: greenyellow;
          font-weight: bold;
        }
    </style>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <label for="">Basic</label>
        <input class="form-control" type="text" name="cb" id="cb" autocomplete="off" />
      </div>
    </div>
  </div>
  <table class="table table-responsive">
    <tr>
      <td>
        <h6>Current Level</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>
          <tr>
            <td>69000</td>
          </tr>
          <tr>
            <td>71100</td>
          </tr>
          <tr>
            <td>73200</td>
          </tr>
          <tr>
            <td>75400</td>
          </tr>
          <tr>
            <td>77700</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(function () {
      $('#cb').on('change keyup', function() {
        var search = $(this).val();
        $('table tr td').filter(function() {
            if($(this).text() == search){
              $(this).parent('tr').addClass('highlight');
              $(this).parent('tr').closest('tr').next().addClass('highlight2');
            }else{
              $(this).parent('tr').removeClass('highlight');
              $(this).parent('tr').closest('tr').next().removeClass('highlight2');
            }
        })
      });
    });
  </script>

</body>
</html>

5. 注意事项和总结

• 确保引入 jQuery 库。
• 可以根据实际需求调整 CSS 样式和 jQuery 代码。
• 如果表格数据量很大，可以考虑优化代码性能，例如使用缓存或节流函数。
• closest('tr') 用于确保我们找到的是同一个表格内的下一个tr，避免在嵌套表格中出现错误。
• 使用 change keyup 事件可以实时响应用户的输入。

通过本教程，你应该能够掌握如何使用 jQuery 高亮 HTML 表格中匹配的单元格及其相邻单元格。这个技巧可以应用于各种交互式表格应用中，提升用户体验。