HTML表格多列搜索实现：JavaScript增强筛选功能教程

本教程将详细指导如何通过修改JavaScript函数，为HTML表格实现多列搜索功能。我们将以“姓名”和“国家”两列为例，展示如何同时筛选多个数据列，从而提升用户在大型数据表格中查找信息的效率和体验。

在网页开发中，表格数据展示非常常见，而为表格添加搜索功能则是提升用户体验的关键。默认的单列搜索功能往往无法满足用户在多维度数据中查找信息的需求。例如，用户可能希望同时在“姓名”和“国家”列中搜索某个关键词。本教程将介绍如何通过简单的JavaScript代码修改，实现HTML表格的跨多列搜索功能，让用户能够更灵活地筛选数据。

理解原始单列搜索机制

首先，我们来看一个典型的单列搜索实现。它通常通过监听输入框的keyup事件来触发搜索，并遍历表格的每一行，只检查特定列（例如第一列）的内容是否包含搜索关键词。

      姓名     国家   
      Alfreds Futterkiste     Germany   
      Berglunds snabbkop     Sweden   
      Island Trading     UK   
      Koniglich Essen     Germany   
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]; 这一行，它明确指定了只获取当前行（tr[i]）的第一个

元素（索引为 0），因此搜索范围被限制在“姓名”列。

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

实现多列搜索功能

要实现多列搜索，我们需要修改 myFunction，使其能够同时获取并检查多个列的内容。核心思路是：

获取所有需要参与搜索的列的元素。提取这些元素的文本内容。使用逻辑或（||）运算符，判断搜索关键词是否在任一列中出现。

以下是修改后的JavaScript代码，用于同时搜索“姓名”（第一列，索引0）和“国家”（第二列，索引1）：

function myFunction() {  // 声明新增变量 td1, txtValue1 用于处理第二列  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";    }  }}

完整示例代码

将修改后的JavaScript代码与HTML结构结合，即可实现一个完整的、支持多列搜索的HTML表格。

HTML表格多列搜索示例 body { font-family: Arial, sans-serif; margin: 20px; } #myInput { width: 300px; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; } #myTable th, #myTable td { text-align: left; padding: 12px; border: 1px solid #ddd; } #myTable tr.header { background-color: #f2f2f2; font-weight: bold; } #myTable tr:hover:not(.header) { background-color: #f5f5f5; }

表格多列搜索演示

在下方输入框中输入关键词，即可同时搜索“姓名”和“国家”两列。

以上就是HTML表格多列搜索实现：JavaScript增强筛选功能教程的详细内容，更多请关注创想鸟其它相关文章！

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

ai html java javascript red ssl

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

413.8K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

使用 JavaScript 函数动态添加 CSS 样式

上一篇 2025年12月20日 22:18:33

如何设计一个可扩展的JavaScript事件处理系统？

下一篇 2025年12月20日 22:18:49

mysql如何输入注释 mysql写sql代码的格式规范

在mysql中，单行注释使用–（后跟空格）或#，多行注释使用/*…*/。1. 注释应解释“为什么”而非“是什么”，单行注释推荐使用–，#常用于脚本开头；2. 多行注释适用于复杂逻辑说明或版权信息；3. sql格式规范包括关键词大写、统一缩进、合理换行与逗号放置，以…

程序猿
2026年9月23日 • 用户投稿
4000
用户投稿

CodeIgniter 4 API：捕获并返回HTTP响应中的错误

在使用CodeIgniter 4构建API服务时，我们经常需要处理各种异常情况。默认情况下，CodeIgniter 4会将错误信息记录到日志文件中，但不会直接将其返回到HTTP响应中。这导致我们需要频繁地查看日志文件来排查问题，效率较低。为了解决这个问题，我们可以通过修改配置文件，将错误信息直接暴露…

程序猿
2026年9月23日
0000
用户投稿

safari浏览器如何开启画中画模式播放视频_safari浏览器画中画模式开启方法

如果您在观看网页视频时希望同时进行其他操作，可以启用 Safari 浏览器的画中画模式，让视频以浮动小窗形式继续播放。此功能支持大多数主流视频网站，如 YouTube、优酷等。本文运行环境：MacBook Air，macOS Sonoma 一、通过视频右键菜单开启画中画此方法适用于正在播放的视频…

程序猿
2026年9月23日
0000
FlexClip如何用于在线AI视频制作？快速创建云端AI视频的技巧

FlexClip通过AI脚本生成、文本转视频、AI配音与图片生成等智能工具，实现从文案到成片的高效制作。其亮点在于一站式云端操作、强大内容生成力、素材库丰富、易用性与专业性兼备。用户可通过个性化修改、原创素材融入、精细剪辑及多轮迭代提升视频独特性，同时应对AI理解偏差、素材同质化、情感表达局限等挑战…

程序猿
2026年9月23日 • 用户投稿
0000
mysql怎么添加降序索引 mysql创建排序索引的语法详解

mysql从8.0版本开始支持降序索引，通过在列名后添加desc关键字创建，例如create index idx_order_date_desc on orders (order_date desc);。1. 降序索引优化了order by column desc查询的性能，避免文件排序；2. 升序…

程序猿
2026年9月23日 • 用户投稿
1000
windows8提示“无法启动此程序，因为计算机中丢失msvcr110.dll”怎么办_windows8 msvcr110.dll缺失修复方法

首先使用系统文件检查器修复系统文件，若无效则重新安装Microsoft Visual C++ 2012 Redistributable，或手动注册msvcr110.dll，也可借助可靠DLL修复工具解决该问题。如果您尝试运行某个程序，但系统弹出“无法启动此程序，因为计算机中丢失msvcr110.d…

程序猿
2026年9月23日 • 用户投稿
3000
用户投稿

Java中使用栈验证JSON字符串结构：深入理解与实践

本文探讨了在Java中利用栈验证JSON字符串结构的核心原理与常见陷阱。我们将分析一种初始实现中处理引号、转义字符及字符串内部结构字符的不足，并提供一个更健壮的栈基方法，以准确判断JSON的括号、方括号和引号是否平衡，同时纠正关于不完整JSON片段有效性的常见误解。 1. JSON结构与验证的重要性…

程序猿
2026年9月23日
1000
mysql索引类型有哪些 mysql创建不同索引的方法对比

mysql支持多种索引类型，选择合适的索引类型可提升数据库性能。1.b-tree索引适用于等值、范围查询和排序，是innodb和myisam的默认索引；2.hash索引仅适合等值查询，不支持范围和排序，memory引擎支持显式创建；3.fulltext索引用于文本搜索，适合关键词查找；4.空间索引（…

程序猿
2026年9月23日 • 用户投稿
0000
用户投稿

Tableau的AI混合工具如何操作？生成智能数据可视化的实用指南

Tableau的AI混合工具通过自然语言查询、自动解释和预测模型，降低数据分析门槛，帮助非技术用户快速获取洞察。首先，Ask Data支持用日常语言提问，自动生成可视化图表，显著提升数据探索效率；其次，Explain Data利用机器学习分析异常点，揭示潜在影响因素，将“是什么”转化为“为什么”；再…

程序猿
2026年9月23日
0000
mysql安装完成如何事件 mysql定时任务设置教程

要使用mysql的事件调度器设置定时任务，首先需开启事件调度器，其次创建定时事件，再查看管理事件，最后注意权限与时间格式等问题。具体步骤如下：1. 开启事件调度器：通过命令或配置文件启用；2. 创建事件：使用create event定义执行频率与sql操作；3. 管理事件：可查看、修改或删除已有事件…

程序猿
2026年9月23日 • 用户投稿
1000
用户投稿

OpenAI 与微软达成重磅交易：股权结构再变，投资者面临稀释风险

据《金融时报》披露，OpenAI 近期完成了一系列关键性交易，使其股权架构日趋复杂，同时也加剧了投资者对未来收益前景的担忧。在这些新协议推动下，OpenAI 的估值已飙升至5000亿美元，跃居全球最具价值的未上市企业之列。这一惊人估值的背后，是公司与英伟达和AMD两家芯片巨头达成的数十亿美元合作协议…

程序猿
2026年9月23日
1000
用户投稿

NS2版《无主之地4》突遭延期！预购将取消

《无主之地4》现可提前购入，使用金币叠加限时优惠券后，标准版仅需244.5元（共节省 ¥53.5）；超级豪华版为457.4元（总计优惠 ¥100.6）。原计划于10月3日发布的《无主之地4》Nintendo Switch 2版本已确认延期。Gearbox Entertainment最新发布公告称，…

程序猿
2026年9月23日
2000
用户投稿

如何在mysql中优化多表JOIN查询

答案：优化MySQL多表JOIN需创建关联字段索引、提前过滤数据、选择合适JOIN类型与表序、利用EXPLAIN分析执行计划，并定期更新统计信息以提升查询效率。在MySQL中优化多表JOIN查询，关键在于减少数据扫描量、提升连接效率，并合理利用索引和执行计划。以下是一些实用的优化策略。 1. 确保…

程序猿
2026年9月23日
3000
用户投稿

WooCommerce 购物车联动：实现赠品自动添加与移除的专业指南

本文提供了一份关于在 woocommerce 中实现自动赠品系统的全面指南。它解决了在程序化添加产品时常见的 `woocommerce_add_to_cart` 递归问题，并提供了一个使用自定义购物车项元数据来管理关联赠品的健壮解决方案，确保赠品能与特定主产品同步添加和移除。引言在电子商务中，为…

程序猿
2026年9月23日
5000
用户投稿

苹果手机USB调试模式开启方法

准备工作在操作前，请确保你的iPhone已连接网络，并升级至最新的iOS系统版本。同时，准备一台安装了最新版iTunes（Windows）或Finder（macOS）的电脑，以确保设备能够被正确识别和管理。步骤一：开启相关调试功能打开iPhone上的“设置”应用。进入“Safari”浏览器设…

程序猿
2026年9月23日
1000
用户投稿

Java Web项目在无Maven/Eclipse环境下生成WAR包的实践指南

本文详细介绍了如何在没有Maven或Eclipse等集成开发环境或构建工具的情况下，为Java Web项目手动或通过Apache Ant工具生成WAR文件。教程涵盖了WAR文件的基本结构、使用Ant进行编译和打包的具体步骤，并提供了Ant构建脚本示例，旨在帮助开发者理解并实践WAR包的独立构建过程。…

程序猿
2026年9月23日
1000
MySQL安装需要哪些硬件配置要求？

mysql的硬件配置需根据应用场景和负载决定，生产环境应重点考虑磁盘i/o、内存、cpu和网络。1. cpu：oltp场景多核心更重要，olap则更依赖主频和缓存；2. 内存：buffer pool越大越好，但需避免过度分配导致swap使用；3. 磁盘i/o：ssd是标配，nvme ssd和raid…

程序猿
2026年9月23日 • 用户投稿
2000
硬核推理游戏《机密谋杀案中案》参加Steam新品节试玩版上线

如果你已经顺利解开《奥伯拉丁的回归》或《金偶像迷案》中的重重谜团，那么接下来的挑战将更加扑朔迷离！好莱坞正陷入一场震惊全城的连环谋杀风暴！你将化身为一名敏锐过人的侦探，运用你的观察力与推理能力：勘察犯罪现场，搜集关键证据，抽丝剥茧地还原真相。幕后黑手究竟是谁？他又为何精心策划这一系列隐秘的杀局？这…

程序猿
2026年9月23日 • 用户投稿
1000
用户投稿

如何在Procreate中使用AI导出图片？保存高质量图像的正确方法

Procreate无内置AI导出功能，但可通过导出高质量图像（如PSD、TIFF、PNG）供外部AI工具优化；选择格式需根据用途，PSD适合协作，TIFF用于印刷，PNG支持透明背景，JPEG慎用以避免压缩损失；画布应高DPI创建，色彩配置优先sRGB，印刷时后期转CMYK更精准。 ☞☞☞AI 智能…

程序猿
2026年9月23日
1000
用户投稿

linux如何优雅的关机

优雅关机的三大法宝：拔电源、shutdown、poweroff 及其对硬件和数据的影响在讨论关机方法之前，先了解一下机械硬盘的内部结构。那固态硬盘SSD呢？ FTL工作示意图。FTL表对SSD至关重要，如果在FTL写回Flash之前突然断电，内存数据丢失，FTL表也将丢失。因此，高端SSD和服务…

程序猿
2026年9月23日
1000