当前位置：首页 > 文章列表 > 文章 > 前端 > jQuery高亮表格单元格及周边区域

jQuery高亮表格单元格及周边区域

2025-11-09 16:12:34 0浏览收藏

本文详细介绍了如何使用 jQuery 实现表格单元格的高亮显示及其周边区域高亮效果。通过监听输入框事件，实时搜索匹配的表格单元格，并利用 CSS 类进行高亮显示，同时高亮紧随其后的单元格，增强用户交互体验。教程提供了完整的 HTML 结构、CSS 样式和 jQuery 代码示例，方便开发者快速理解和应用。此外，还分享了注意事项和优化建议，助力开发者构建更高效、用户友好的交互式表格应用，适用于数据展示和信息检索等多种场景。

使用 jQuery 高亮 HTML 表格单元格及其相邻单元格

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

1. HTML 结构

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

<div class="container">
    <div class="row">
      <div class="col-md-6">
        <label for="">Basic</label>
        &lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;cb&quot; id=&quot;cb&quot; autocomplete=&quot;off&quot; /&gt;
      </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 类。

.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>
        &lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;cb&quot; id=&quot;cb&quot; autocomplete=&quot;off&quot; /&gt;
      </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>