新闻中心

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

2025-10-27
浏览次数：次
返回列表

使用 jquery 高亮 html 表格单元格及其相邻单元格

本教程旨在指导开发者如何使用 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 类。

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

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

小爱开放平台 小爱开放平台

小米旗下小爱开放平台

小爱开放平台 291 查看详情 小爱开放平台

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. 完整代码示例




    
    
    jQuery Table Highlight
    
    



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

5. 注意事项和总结

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

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

以上就是使用 jQuery 高亮 HTML 表格单元格及其相邻单元格的详细内容，更多请关注其它相关文章！


# 如何使用  # 乌当外贸推广网络营销  # 信阳网站建设开发怎么样  # seo优化+百度推广  # 百家号营销通推广  # 进贤网站营销推广公司  # 重庆短视频seo价格  # 怎么优化维护网站  # 广电营销推广案例分析  # 棋牌数据论坛推广网站  # 辉宇seo  # 这段  # 这是  # 的是  # 如何实现  # css  # 可以根据  # 小爱  # 回调  # 输入框  # 单元格  # asic  # red  # cdn  # ai  # 回调函数  # bootstrap  # js  # html  # jquery 


相关栏目： 【 科技资讯46185 】 【 网络学院92790 】


相关推荐： J*aScript异步迭代器_j*ascript异步遍历  PostgreSQL海量数据高效导入策略：Python与Django实践指南  QQ官网正版登录链接 QQ在线登录入口最新  Win11怎么关闭快速启动_Win11彻底关机设置教程  抖音商城签到领现金是真的吗_抖音商城签到奖励与提现说明  TypeScript/J*aScript：高效查找数组中首个唯一ID对象  iCloud登录入口网页版 苹果iCloud官网登录  高德地图家和公司地址在哪设置 高德地图通勤路线设置方法【超详细】  荒野行动PC版怎么注册_荒野行动PC版账号注册详细流程图文教程  Go语言中对Map值调用带指针接收者方法：原理与最佳实践  淘宝网网页版登录入口 淘宝官方网页版快捷登录  React项目中导航栏Logo自适应布局：避免裁剪与布局溢出  Yandex官网搜索引擎免登录_俄罗斯Yandex一键直达入口  如何在离线环境中使用Composer_Composer离线安装依赖包的技巧与策略  sublime怎么设置启动时打开的窗口_sublime会话管理与热退出  快手网页版在线登录 快手网页版官网入口快速访问  Fabric Mod开发：在1.19.3+版本中正确添加自定义物品并管理物品组  如何为你的Composer包编写自动化测试_集成PHPUnit到Composer的scripts工作流  优酷会员付费后没到账怎么办_优酷会员充值异常及解决方法  React/Next.js中实现列表项的动态移动与状态管理：兼论唯一键的重要性  TikTok国际版官网直达_TikTok国际版官网直达进入在线观看  CSS响应式网页如何实现主次模块比例自适应_flex-grow与flex-shrink调整  Go调试环境为何无法启动_Go调试器启动失败原因与解决策略  京东单号查询入口_京东快递订单追踪入口  Google翻译怎么语音输入_Google翻译语音输入功能使用与设置方法  Win10自动更新怎么关闭 Win10永久关闭系统更新的两种方法【终极版】  AO3最新入口2025公告_AO3中文官网合集  sublime如何配置Go语言开发环境_sublime搭建Golang编译运行系统  如何有效阻止外部脚本意外修改内联样式的高度属性  消息称三星明年 2 月正式发布 HBM4，与 SK 海力士同台竞技  Go语言中动态执行代码字符串的策略与实践  怎么去除衣服上的口红印_生活小妙招教你用酒精轻松擦除  J*aScript Promise链中如何正确终止后续.then执行并处理错误  特斯拉自动驾驶房车计划曝光 原型车将于2027年亮相  PySpark中高效提取字符串右侧可变长度数字：使用regexp_extract  怎么在浏览器上运行HTML文件_浏览器运行HTML文件技巧【技巧】  在python-socketio事件处理器中安全访问Flask应用上下文  EMS快递官网app_中国邮政速递物流手机客户端  解决Bootstrap卡片顶部边距导致背景图下移的问题  CSS条件样式无法按设备触发怎么排查_media条件语句正确设置解决触发问题  哔哩哔哩忘记密码了怎么找回_哔哩哔哩密码找回方法  Python中高效访问嵌套字典与列表中的键值对  c++中的const_cast和reinterpret_cast怎么用_c++四种类型转换  composer 和 npm/yarn 在管理依赖方面有什么核心思想差异？  网易大神怎么保存别人动态的图片_网易大神动态图片保存方法  谷歌浏览器如何快速清除某个网站的数据_Chrome网站缓存清理方法  高德地图公交到站提醒失败如何解决 高德提醒权限设置  漫蛙manwa官网登录界面_漫蛙漫画网页版主站入口  poki网页游戏推荐_poki免费游戏平台入口  b站怎么看视频的弹幕数量_b站弹幕数量查看方法 

上一篇：css伪类:not选择器排除元素方法
下一篇：Vue应用中响应式状态丢失？理解全页面刷新与客户端路由对Vue状态管理的影响

搜索