Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
HTML表格多列内容实时搜索过滤教程_创想鸟
原创投稿
  1. 创想鸟首页
  2. 用户投稿

HTML表格多列内容实时搜索过滤教程

程序猿 • • 用户投稿

HTML表格多列内容实时搜索过滤教程

本教程详细介绍了如何使用javascript为html表格实现多列实时搜索过滤功能。通过修改`myfunction`，您可以同时对表格中的多个列（如名称和国家）进行内容匹配，从而提升用户数据查找的效率和体验。文章包含完整的html和javascript代码示例，并解释了实现逻辑及注意事项，帮助开发者快速掌握并应用此技术。

在现代Web应用中，用户经常需要从大量表格数据中快速定位特定信息。客户端实时搜索过滤功能能够显著提升用户体验。通常，我们可能只需要对表格的某一列进行搜索，但实际需求往往更为复杂，需要同时搜索多个列的内容。本教程将指导您如何通过简单的JavaScript代码修改，实现HTML表格的多列实时搜索过滤。

HTML结构基础

首先，我们需要一个基本的HTML表格结构和一个用于输入搜索关键词的文本框。搜索框通过onkeyup事件绑定一个JavaScript函数，以便在用户输入时实时触发过滤。

  
    姓名    国家  
  
    Alfreds Futterkiste    Germany  
  
    Berglunds snabbkop    Sweden  
  
    Island Trading    UK  
  
    Koniglich Essen    Germany

在这个结构中：

是搜索输入框，当用户每次按键抬起时，myFunction() 将被调用。 是需要被过滤的表格。 是表格的标题行，通常不参与过滤。 元素代表数据行，每个 元素代表一个单元格，对应表格的一列。

实现单列搜索的局限性

最初的单列搜索实现通常会聚焦于表格的第一列。例如，以下JavaScript代码只对“姓名”列进行过滤：

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

function myFunction() {  var input, filter, table, tr, td, i, txtValue;  input = document.getElementById("myInput");  filter = input.value.toUpperCase(); // 获取搜索关键词并转为大写，实现不区分大小写搜索  table = document.getElementById("myTable");  tr = table.getElementsByTagName("tr"); // 获取所有行  for (i = 0; i  -1) { // 如果文本包含搜索关键词        tr[i].style.display = ""; // 显示该行      } else {        tr[i].style.display = "none"; // 隐藏该行      }    }  }}

这段代码的问题在于 td = tr[i].getElementsByTagName(“td”)[0]; 这一行，它明确指定只获取索引为 0 的单元格（即第一列）。如果我们需要同时搜索“姓名”和“国家”两列，这种方法就无法满足需求。

实现多列搜索过滤

要实现多列搜索，我们需要修改 myFunction，使其能够同时检查目标列的文本内容。关键在于获取所有相关的列，并使用逻辑或（||）操作符来组合搜索条件。

以下是修改后的 myFunction 实现：

function myFunction() {  // 声明变量  var input, filter, table, tr, td, td1, i, txtValue, txtValue1;  input = document.getElementById("myInput");  filter = input.value.toUpperCase(); // 获取搜索关键词并转为大写  table = document.getElementById("myTable");  tr = table.getElementsByTagName("tr"); // 获取表格的所有行  // 遍历所有表格行，隐藏不匹配搜索查询的行  for (i = 0; i  -1 || txtValue1.toUpperCase().indexOf(filter) > -1) {        tr[i].style.display = ""; // 如果任一列匹配，则显示该行      } else {        tr[i].style.display = "none"; // 否则隐藏该行      }    } else {        // 如果行数据不完整，例如只有一列，也隐藏该行或根据需求处理        tr[i].style.display = "none";    }  }}

代码解析

变量声明：

input, filter, table, tr 的作用与单列搜索相同。新增 td1, txtValue1 用于处理第二列的数据。

获取多列单元格：

td = tr[i].getElementsByTagName(“td”)[0]; 获取当前行的第一个 元素（索引为0，即“姓名”列）。td1 = tr[i].getElementsByTagName(“td”)[1]; 获取当前行的第二个 元素（索引为1，即“国家”列）。getElementsByTagName(“td”) 返回的是一个 HTMLCollection，可以通过索引访问其中的元素。

文本内容提取：

txtValue = td.textContent || td.innerText; 从第一个单元格中提取文本内容。txtValue1 = td1.textContent || td1.innerText; 从第二个单元格中提取文本内容。textContent 和 innerText 都是获取元素文本的方法，textContent 兼容性更好，innerText 在某些旧版浏览器或特定情况下可能表现不同，使用 || 提供了一个回退方案。

组合搜索条件：

if (txtValue.toUpperCase().indexOf(filter) > -1 || txtValue1.toUpperCase().indexOf(filter) > -1) 是实现多列搜索的核心。txtValue.toUpperCase().indexOf(filter) > -1 检查第一个列的文本是否包含搜索关键词（不区分大小写）。txtValue1.toUpperCase().indexOf(filter) > -1 检查第二个列的文本是否包含搜索关键词。|| (逻辑或) 操作符表示：只要两个条件中的 任意一个 为真，整个表达式就为真。这意味着只要搜索关键词在“姓名”或“国家”列中出现，该行就会被显示。

显示/隐藏行：

如果条件为真，tr[i].style.display = “”; 将该行显示出来。如果条件为假，tr[i].style.display = “none”; 将该行隐藏。

扩展到更多列

如果您的表格有更多列需要参与搜索，只需按照相同的模式添加更多的 td 变量和 txtValue 变量，并在 if 条件中使用 || 操作符将它们组合起来。例如，如果需要搜索三列（姓名、国家、城市），代码将变为：

// ...td = tr[i].getElementsByTagName("td")[0];td1 = tr[i].getElementsByTagName("td")[1];td2 = tr[i].getElementsByTagName("td")[2]; // 获取第三列if (td && td1 && td2) { // 确保所有目标单元格都存在    txtValue = td.textContent || td.innerText;    txtValue1 = td1.textContent || td1.innerText;    txtValue2 = td2.textContent || td2.innerText; // 获取第三列文本    if (txtValue.toUpperCase().indexOf(filter) > -1 ||         txtValue1.toUpperCase().indexOf(filter) > -1 ||        txtValue2.toUpperCase().indexOf(filter) > -1) { // 组合三个条件        tr[i].style.display = "";    } else {        tr[i].style.display = "none";    }}// ...

注意事项与最佳实践

性能优化： 对于包含成千上万行数据的大型表格，客户端JavaScript搜索可能会导致性能问题。在这种情况下，考虑使用分页、虚拟滚动或将搜索功能转移到服务器端处理。用户体验： 搜索框的 placeholder 属性应清晰地指示用户可以搜索哪些内容，例如“搜索姓名或国家”。代码健壮性： 在获取 td 元素时，最好进行 if (td) 检查，以防止在某些行数据不完整（例如，少于预期的列数）时导致JavaScript错误。本教程中的代码已经包含了 if (td && td1) 这样的检查。区分大小写： toUpperCase() 方法确保了搜索是不区分大小写的，这通常是用户期望的行为。如果您需要区分大小写的搜索，可以移除 toUpperCase() 调用。标题行处理： 在循环中添加 if (tr[i].classList.contains(‘header’)) { continue; } 可以有效地跳过表格的标题行，确保它们不会被过滤或影响搜索结果。

总结

通过对JavaScript myFunction 进行简单的修改，特别是通过获取多个

元素并使用逻辑或 || 运算符组合搜索条件，我们可以轻松地为HTML表格实现强大的多列实时搜索过滤功能。这种方法不仅易于理解和实现，而且能够显著提升用户在处理表格数据时的效率和满意度。开发者可以根据实际需求，灵活扩展此功能以支持更多列的搜索。

以上就是HTML表格多列内容实时搜索过滤教程的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530856.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
React中利用useRef访问JSX元素的实用指南
上一篇 2025年12月20日 22:20:10
JavaScript SSE服务器推送
下一篇 2025年12月20日 22:20:34

相关推荐

  • mysql如何输入特殊字符 mysql写sql语句的转义方法

    mysql如何输入特殊字符 mysql写sql语句的转义方法mysql如何输入特殊字符 mysql写sql语句的转义方法mysql如何输入特殊字符 mysql写sql语句的转义方法mysql如何输入特殊字符 mysql写sql语句的转义方法

    在mysql中处理特殊字符的核心方法是使用预处理语句，1.手动转义可通过反斜杠实现，如单引号转为’、双引号转为”等，但易出错且不安全；2.更推荐使用预处理语句（prepared statements）或参数绑定，它能自动处理特殊字符并防止sql注入；3.预处理语句的优势包括安全性高，彻底杜绝sql注…

    程序猿的头像 程序猿
    2026年9月23日 • 用户投稿
    300
  • Java中ConnectException连接异常的解决方法 用户投稿

    Java中ConnectException连接异常的解决方法

    答案：Java中ConnectException通常因服务未启动、网络不通或配置错误导致，需检查服务状态、IP端口配置及防火墙设置，并合理设置连接超时与重试机制。 Java中出现ConnectException通常表示应用程序尝试连接到远程服务器时失败，最常见的原因是目标主机拒绝连接或网络不通。这个…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • AO3镜像站替代访问链接_AO3镜像站官方镜像站点 用户投稿

    AO3镜像站替代访问链接_AO3镜像站官方镜像站点

    AO3镜像站替代访问链接为https://nightalk.xyz，用户可通过主站或镜像站点登录账户，支持中文界面切换与多端同步阅读。 AO3镜像站替代访问链接在哪里？这是不少网友都关注的，接下来由PHP小编为大家带来AO3镜像站官方镜像站点，感兴趣的网友一起随小编来瞧瞧吧！ https://arc…

    程序猿的头像 程序猿
    2026年9月23日
    000
  • FreeBSD 15.0 Beta 1 发布，优化系统性能和用户体验 用户投稿

    FreeBSD 15.0 Beta 1 发布，优化系统性能和用户体验

    FreeBSD 15.0 Beta 1 现已推出，本次版本带来了多项重要更新，显著提升了系统运行效率、硬件适配能力以及整体使用体验。 主要更新内容 OpenZFS 升级至 2.4.0-rc2：带来更稳定的文件系统表现与性能提升，同时引入更先进的存储管理功能。 TCP LRO 性能优化：修复了特定网络…

    程序猿的头像 程序猿
    2026年9月23日
    100
  • PHP高效读取大型GZ文件：揭示Gzip的顺序访问限制与实践方法 用户投稿

    PHP高效读取大型GZ文件：揭示Gzip的顺序访问限制与实践方法

    本教程深入探讨了php中处理大型gz压缩文件的核心挑战：其固有的顺序访问特性。我们将解释为何无法对gz文件进行随机跳转读取，以及这意味着您必须从头开始按序解压数据。文章将提供一种实用的分块读取策略，并附带php示例代码，帮助开发者高效、安全地处理超大gz文件，同时讨论潜在的跨块数据处理问题及内存管理…

    程序猿的头像 程序猿
    2026年9月23日
    200

  • 如何在RayTune中训练AI大模型？分布式超参数优化的技巧

    如何在RayTune中训练AI大模型？分布式超参数优化的技巧如何在RayTune中训练AI大模型？分布式超参数优化的技巧如何在RayTune中训练AI大模型？分布式超参数优化的技巧如何在RayTune中训练AI大模型？分布式超参数优化的技巧

    RayTune通过分布式超参数优化解决大模型训练中的资源调度、搜索效率、实验管理与容错难题，其核心是利用并行化和智能调度（如ASHA、PBT）加速最优配置探索。首先，将训练逻辑封装为可调用函数，并在其中集成分布式训练（如PyTorch DDP）；其次，定义超参数搜索空间与资源需求（如每试验2 GPU…

    程序猿的头像 程序猿
    2026年9月23日 • 用户投稿
    100

  • mysql怎么执行子查询 mysql输入嵌套sql语句方法

    mysql怎么执行子查询 mysql输入嵌套sql语句方法mysql怎么执行子查询 mysql输入嵌套sql语句方法mysql怎么执行子查询 mysql输入嵌套sql语句方法mysql怎么执行子查询 mysql输入嵌套sql语句方法

    mysql子查询常见类型包括标量子查询、行子查询和表子查询，分别返回一行一列、一行多列和多行多列数据；应用场景涵盖where作为过滤条件、from作为派生表、select作为标量列以及dml操作的数据提供。此外，根据与外部查询的关联性分为非关联子查询和关联子查询，前者独立执行一次，后者依赖外部查询每…

    程序猿的头像 程序猿
    2026年9月23日 • 用户投稿
    100

  • 谷歌浏览器视频全屏模式声音延迟如何修复

    谷歌浏览器视频全屏模式声音延迟如何修复谷歌浏览器视频全屏模式声音延迟如何修复谷歌浏览器视频全屏模式声音延迟如何修复谷歌浏览器视频全屏模式声音延迟如何修复

    关闭硬件加速可解决谷歌浏览器全屏视频声音延迟问题。依次尝试：1. 关闭硬件加速并重启浏览器；2. 重置chrome://flags实验性功能；3. 清除全部缓存数据；4. 更新Chrome版本及显卡音频驱动。若仍存在延迟，需对比不同网站或设备以判断故障源。 谷歌浏览器在视频全屏模式下出现声音延迟，通…

    程序猿的头像 程序猿
    2026年9月23日 • 用户投稿
    300

  • 硬刚 Sora 2，谷歌的 Veo 3.1 确实有小惊喜｜AI 上新

    硬刚 Sora 2，谷歌的 Veo 3.1 确实有小惊喜｜AI 上新硬刚 Sora 2，谷歌的 Veo 3.1 确实有小惊喜｜AI 上新硬刚 Sora 2，谷歌的 Veo 3.1 确实有小惊喜｜AI 上新硬刚 Sora 2，谷歌的 Veo 3.1 确实有小惊喜｜AI 上新

    谷歌最新视频生成模型 veo 3.1 来了！今日上手可用。 北京时间 10 月 16 日，谷歌在 Gemini API 中发布了 Veo 3.1 和 Veo 3.1 Fast 付费预览版。模型一上线，就受到了行业的高度关注。毕竟，和前不久发布的 Sora 2 一样，这次 Veo 3.1 也新增了音频…

    程序猿的头像 程序猿
    2026年9月23日 • 用户投稿
    200
  • Java Optional与集合结合使用方法 用户投稿

    Java Optional与集合结合使用方法

    Optional与集合结合可避免空指针异常。1. 用Optional.ofNullable包装可能为null的集合元素；2. Stream中filter后接findFirst返回Optional，安全查找；3. 对象属性为Optional时，通过flatMap展开提取值；4. 方法返回Optiona…

    程序猿的头像 程序猿
    2026年9月23日
    200
  • 小说免费阅读网站推荐 全集小说免费在线阅读网官方地址 用户投稿

    小说免费阅读网站推荐 全集小说免费在线阅读网官方地址

    为了解决广大书迷寻找免费阅读资源的烦恼，本文精选了几个资源丰富、体验良好的在线小说网站。这些平台提供了海量全集作品，让你无需付费即可轻松追更，畅享阅读的乐趣。 直接观看“☞☞☞☞☞点击小说免费阅读网站首页直达☜☜☜☜☜”； 直接观看“☞☞☞☞☞点击海内外小说、漫画观看APP合集☜☜☜☜☜”； 一、笔…

    程序猿的头像 程序猿
    2026年9月23日
    000
  • vivo X300 Pro首发定制2亿灭霸长焦 韩伯啸：长焦新王 用户投稿

    vivo X300 Pro首发定制2亿灭霸长焦 韩伯啸：长焦新王

    9月2日，vivo产品经理韩伯啸再次为即将发布的vivo x300系列预热，此次聚焦于旗舰机型vivo x300 pro的影像能力。 韩伯啸指出，X300 Pro搭载了独家深度定制的2亿HPB“灭霸”长焦镜头，标志着vivo在长焦技术上的又一次飞跃。这颗镜头是蓝厂真正意义上的第四代两亿像素长焦系统，…

    程序猿的头像 程序猿
    2026年9月23日
    000
  • Java ListIterator如何实现双向遍历 用户投稿

    Java ListIterator如何实现双向遍历

    Java中的ListIterator接口支持双向遍历，即可以从前往后，也可以从后往前遍历列表。这与普通的Iterator只能单向向后遍历不同。ListIterator提供了更灵活的操作方式，特别适用于需要反向访问或在遍历过程中修改列表的场景。 1. ListIterator的基本特性 ListIte…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • UC浏览器国际版和国内版有什么区别_UC浏览器国际版与国内版差异说明 用户投稿

    UC浏览器国际版和国内版有什么区别_UC浏览器国际版与国内版差异说明

    UC浏览器国际版更简洁高效，因面向全球市场，其界面无信息流和冗余功能，广告与推送极少，不集成阿里系服务，数据存储遵循GDPR，支持繁体中文与英文，安装包小、运行流畅，适合追求纯净浏览体验的用户。 如果您在选择UC浏览器时发现存在国际版和国内版两个版本，可能会对它们的功能和体验差异感到困惑。以下是关于…

    程序猿的头像 程序猿
    2026年9月22日
    100

  • mysql如何分析索引使用 mysql创建索引后的执行计划解读

    mysql如何分析索引使用 mysql创建索引后的执行计划解读mysql如何分析索引使用 mysql创建索引后的执行计划解读mysql如何分析索引使用 mysql创建索引后的执行计划解读mysql如何分析索引使用 mysql创建索引后的执行计划解读

    要分析mysql索引使用和执行计划，核心是通过explain命令查看查询路径，并结合handler_read%状态变量评估索引效率。1. 使用explain命令分析执行计划，关注type、key、extra等列，判断是否高效利用索引；2. 通过show global status like &#82…

    程序猿的头像 程序猿
    2026年9月22日 • 用户投稿
    100
  • 解决TCPDF保存文件权限问题的完整指南 用户投稿

    解决TCPDF保存文件权限问题的完整指南

    本文旨在解决使用tcpdf在%ignore_a_1%中生成pdf并保存到服务器（’f’模式）时遇到的“permission denied”错误，尤其是在macos环境下。核心问题通常源于不正确的服务器文件路径或目标文件夹缺乏写入权限。教程将详细阐述如何构建正确的绝对文件路径，…

    程序猿的头像 程序猿
    2026年9月22日
    200

  • mysql怎么添加前缀索引 mysql创建前缀索引的长度选择

    mysql怎么添加前缀索引 mysql创建前缀索引的长度选择mysql怎么添加前缀索引 mysql创建前缀索引的长度选择mysql怎么添加前缀索引 mysql创建前缀索引的长度选择mysql怎么添加前缀索引 mysql创建前缀索引的长度选择

    在mysql中，为长字符串列添加前缀索引的核心目的是优化查询性能并节省存储空间。1. 前缀索引通过仅索引列值的前n个字符实现这一目标；2. 前缀长度的选择需在区分度与存储效率之间取得平衡，理想长度应确保高区分度（如90%以上）且不过度冗余；3. 可通过执行select count(distinct …

    程序猿的头像 程序猿
    2026年9月22日 • 用户投稿
    100
  • 《植物大战僵尸：重植版》制作人：价格亲民 未使用AI！ 用户投稿

    《植物大战僵尸：重植版》制作人：价格亲民 未使用AI！

    经典塔防游戏《植物大战僵尸》在问世16年后迎来重磅回归。由PopCap Games精心打造的重制作品——《植物大战僵尸：重植版》将于10月23日正式登陆PlayStation、Xbox、Nintendo Switch以及PC平台。 据The Gamer报道，该游戏执行制作人Jake Neri在采访中…

    程序猿的头像 程序猿
    2026年9月22日
    200
  • VSCode运行多文件C项目 完整VSCode配置C++开发教程 用户投稿

    VSCode运行多文件C项目 完整VSCode配置C++开发教程

    要解决#%#$#%@%@%$#%$#%#%#$%@_e2fc++805085e25c9761616c00e065bfe8运行多文件c项目的问题，核心是正确配置tasks.json、launch.json和settings.json文件以定义编译、调试和项目路径。首先安装c/c++扩展插件和可选的编译…

    程序猿的头像 程序猿
    2026年9月22日
    000
  • Java集合框架在实际项目中的最佳实践 用户投稿

    Java集合框架在实际项目中的最佳实践

    合理选择集合类型并预设容量，使用不可变集合保护数据，避免遍历中修改结构，可提升Java程序性能与安全性。 Java集合框架是开发中使用最频繁的工具之一，合理使用能显著提升代码的可读性、性能和稳定性。在实际项目中，遵循一些最佳实践可以避免常见陷阱，提高程序健壮性。 选择合适的集合类型 不同场景应选用最…

    程序猿的头像 程序猿
    2026年9月22日
    100

发表回复

登录后才能评论
关注微信