实现基于JavaScript的实时表格搜索过滤功能教程

程序猿 • 2025年12月12日 20:12:16 • 用户投稿

本教程详细介绍了如何利用javascript实现网页表格的实时搜索过滤功能，无需用户按下回车键即可动态更新显示结果。文章涵盖了html结构、css样式以及两种javascript实现方案：一种是现代简洁的事件监听方法，另一种是传统的`onkeyup`函数方法，并提供了代码示例和关键注意事项，帮助开发者构建高效的用户界面。

1. 引言

在现代Web应用中，用户经常需要从大量数据中快速查找特定信息。对于以表格形式展示的数据，提供一个实时搜索过滤功能可以极大地提升用户体验。本文将指导您如何使用纯JavaScript在客户端实现这一功能，当用户在搜索框中输入内容时，表格数据会即时根据输入进行筛选，而无需点击任何按钮或按下回车键。

2. 核心原理

实时搜索过滤的核心原理是监听搜索输入框的输入事件，每当输入框内容发生变化时，就遍历表格中的每一行数据。对于每一行，检查其特定列的内容是否包含搜索关键词。如果包含，则显示该行；如果不包含，则隐藏该行。

3. HTML 结构准备

首先，我们需要一个搜索输入框和一个用于展示数据的HTML表格。表格的结构应包含表头（

）和表体（

），这有助于更好地组织内容和提高可访问性。

    实时表格搜索过滤                             Id         Bin         Tür         Banka Adı         Type         Name         Oluşturma Tarihi         Güncelleme Tarihi       
    
                        1         123456         类型A         银行X         Category1         产品名称A         2023-01-01         2023-01-02       
              2         654321         类型B         银行Y         Category2         服务项目B         2023-01-03         2023-01-04       
              3         987654         类型A         银行Z         Category1         解决方案C         2023-01-05         2023-01-06

Id	Bin	Tür	Banka Adı	Type	Name	Oluşturma Tarihi	Güncelleme Tarihi
1	123456	类型A	银行X	Category1	产品名称A	2023-01-01	2023-01-02
2	654321	类型B	银行Y	Category2	服务项目B	2023-01-03	2023-01-04
3	987654	类型A	银行Z	Category1	解决方案C	2023-01-05	2023-01-06

关于数据填充：在实际应用中，表格数据通常来自后端API（例如通过PHP获取JSON数据）。您可以使用PHP或其他后端语言将数据动态地填充到

标签中。例如，原始问题中的PHP代码片段展示了如何从JSON URL获取数据并将其渲染为表格行。这里我们使用静态示例数据来演示JavaScript过滤逻辑。

<?php// 假设这是您的PHP代码，用于从API获取数据并渲染表格$json_url = "websitename"; // 替换为您的API地址$json = file_get_contents($json_url);$data = json_decode($json, TRUE);echo "";echo "";echo "";echo "";echo "";echo "";echo "";foreach($data as $record) { echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo "";}echo "";echo "Id Bin Tür Banka Adı Type Name Oluşturma Tarihi Güncelleme Tarihi
" . htmlspecialchars($record["id"]) . " " . htmlspecialchars($record["bin"]) . " " . htmlspecialchars($record["tur"]) . " " . htmlspecialchars($record["banka_adi"]) . " " . htmlspecialchars($record["type"]) . " " . htmlspecialchars($record["name"]) . " " . htmlspecialchars($record["created_at"]) . " " . htmlspecialchars($record["updated_at"]) . "
";?>

Id	Bin	Tür	Banka Adı	Type	Name	Oluşturma Tarihi	Güncelleme Tarihi
" . htmlspecialchars($record["id"]) . "	" . htmlspecialchars($record["bin"]) . "	" . htmlspecialchars($record["tur"]) . "	" . htmlspecialchars($record["banka_adi"]) . "	" . htmlspecialchars($record["type"]) . "	" . htmlspecialchars($record["name"]) . "	" . htmlspecialchars($record["created_at"]) . "	" . htmlspecialchars($record["updated_at"]) . "

4. CSS 样式（可选但推荐）

为了使表格和搜索框具有更好的视觉效果，可以添加一些基本的CSS样式。

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

/* style.css */* {  box-sizing: border-box;}#myInput {  background-image: url('/css/searchicon.png'); /* 搜索图标，根据实际路径调整 */  background-position: 10px 10px;  background-repeat: no-repeat;  width: 100%;  font-size: 16px;  padding: 12px 20px 12px 40px; /* 留出空间给图标 */  border: 1px solid #ddd;  margin-bottom: 12px;}#myTable {  border-collapse: collapse; /* 合并边框 */  width: 100%;  border: 1px solid #ddd;  font-size: 18px;}#myTable th,#myTable td {  text-align: left;  padding: 12px;}#myTable tr {  border-bottom: 1px solid #ddd;}#myTable tr.header,#myTable tbody tr:hover { /* 表头和鼠标悬停行背景色 */  background-color: #f1f1f1;}

5. JavaScript 实现实时过滤

我们将介绍两种JavaScript实现方法。

5.1 方法一：使用现代事件监听器（推荐）

这种方法使用addEventListener(‘input’)来监听输入框的实时变化，并利用row.hidden属性来控制行的显示与隐藏，代码更加简洁和现代化。

// script.jswindow.addEventListener("load", () => {  const searchInput = document.getElementById("myInput");  const tableBodyRows = document.querySelectorAll("#myTable tbody tr"); // 选择tbody下的所有行  searchInput.addEventListener("input", (e) => {    const filter = e.target.value.toUpperCase(); // 获取输入值并转为大写，用于不区分大小写的搜索    tableBodyRows.forEach(row => {      // 假设我们要在表格的第6列（索引为5）进行搜索      // 注意：row.cells 是一个 HTMLCollection，包含当前行的所有 td 元素      const targetCell = row.cells[5]; // 获取第6个单元格 (索引从0开始)      if (targetCell) {        const cellText = targetCell.textContent || targetCell.innerText;        // 如果有过滤条件且单元格内容不包含过滤条件，则隐藏该行        row.hidden = filter && !cellText.toUpperCase().includes(filter);      }    });  });});

代码解释：

window.addEventListener(“load”, …): 确保DOM完全加载后再执行JavaScript，避免因元素未加载而导致的错误。searchInput.addEventListener(“input”, …): 监听myInput输入框的input事件。这个事件在输入框的值发生任何变化时都会触发，包括粘贴、剪切、拖放等，比keyup更全面。e.target.value.toUpperCase(): 获取当前输入框的值，并将其转换为大写，以便进行不区分大小写的搜索。document.querySelectorAll(“#myTable tbody tr”): 选中id为myTable的表格中tbody下的所有tr元素。forEach(row => { … }): 遍历所有表格行。row.cells[5]: 获取当前行的第6个单元格（）。在HTML表格中，cells属性返回一个HTMLCollection，包含tr元素的所有或

子元素。索引从0开始，所以第6列是索引5。cellText.toUpperCase().includes(filter): 检查单元格的文本内容（转换为大写后）是否包含过滤关键词。row.hidden = …: 这是控制行显示/隐藏的关键。当row.hidden设置为true时，元素会被隐藏；设置为false时，元素会显示。这种方法比直接修改style.display更简洁。

5.2 方法二：使用传统的 onkeyup 函数

这种方法与原始问题中尝试的方法类似，通过onkeyup事件调用一个全局函数来执行过滤。

// script.jsfunction 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"); // 获取所有行，包括表头  // 遍历所有表格行，从索引1开始，跳过表头行  for (i = 1; i  -1) {        tr[i].style.display = ""; // 如果匹配，则显示该行      } else {        tr[i].style.display = "none"; // 如果不匹配，则隐藏该行      }    }  }}// 在HTML中，需要在input标签上添加 onkeyup="myFunction()"//

代码解释：

onkeyup=”myFunction()”: 直接在HTML元素上绑定事件处理器，当用户释放键盘按键时触发myFunction。tr = table.getElementsByTagName(“tr”): 获取表格中的所有tr元素，包括

中的表头行。for (i = 1; i tr[i].style.display = “”: 将行的display样式设置为空字符串，使其恢复默认显示（通常是table-row）。tr[i].style.display = “none”: 隐藏行。

6. 注意事项与最佳实践

ID 匹配： 确保JavaScript中引用的元素ID（如myInput, myTable）与HTML中的ID完全一致，包括大小写。这是常见的错误来源。搜索列选择： row.cells[index]中的index决定了您要搜索哪一列的数据。请根据您的表格结构和需求调整此索引。性能优化： 对于包含成千上万行数据的大型表格，客户端JavaScript过滤可能会导致性能问题。在这种情况下，考虑将过滤逻辑放在服务器端实现，每次输入时向服务器发送请求并返回过滤后的数据。事件选择：input事件（推荐）：在输入框值改变时立即触发，提供最实时的体验。keyup事件：在键盘按键释放时触发。可能无法捕获所有值变化（例如通过鼠标粘贴）。语义化HTML： 使用

和

标签可以使表格结构更清晰，也方便JavaScript精确选择要操作的行（例如，#myTable tbody tr）。可访问性：为input标签添加placeholder和title属性，提供清晰的提示。autocomplete=”off”可以防止浏览器自动填充搜索框，这在某些实时搜索场景下是希望的。错误处理： 在实际项目中，可能需要添加更多的错误处理，例如检查td是否存在，以防止在某些行没有足够列时脚本出错。

7. 总结

通过本教程，您应该已经掌握了两种在网页表格中实现实时搜索过滤的方法。推荐使用现代的addEventListener(‘input’)配合row.hidden属性的方法，因为它更简洁、更高效且能捕获所有输入变化。选择适合您项目需求的方法，并结合最佳实践，可以为用户提供一个流畅、高效的数据查找体验。

以上就是实现基于JavaScript的实时表格搜索过滤功能教程的详细内容，更多请关注php中文网其它相关文章！

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

css css样式 go html java javascript js json php win 后端处理器浏览器

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

413.8K 文章

0 评论

2 粉丝

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

PHP DOMDocument：高效解析HTML并提取嵌套元素与属性

上一篇 2025年12月12日 20:12:08

如何用PHP代码实现用户行为分析功能_PHP用户行为分析功能实现与数据挖掘教程

下一篇 2025年12月12日 20:12:31

Win10系统鼠标光标乱跑怎么解决？

鼠标作为电脑的重要外设之一，其操作的流畅性直接影响到我们的使用体验。大家在日常使用中，有没有遇到过光标不受控制、随意移动的问题呢？下面，我们来分享一下如何解决鼠标光标乱跑的问题。如何解决鼠标光标乱跑问题？点击右键打开“开始”菜单，然后选择其中的“计算机管理”。进入计算机管理后，依次找到并展开“…

程序猿
2026年9月25日 • 用户投稿
1000
sublime未保存提示怎么关掉_关闭Sublime退出时未保存文件弹窗

启用自动保存或热退出功能可避免Sublime Text退出时的未保存文件提示：1. 设置”save_on_focus_lost”: true实现切换时自动保存；2. 配置”hot_exit”: true使未保存文件在下次启动时恢复，从而跳过确认弹窗。 …

程序猿
2026年9月25日 • 用户投稿
0000
win10网络通但不能上网的解决方法

当电脑长时间使用时，难免会出现各种问题。近期有win10系统的用户向我们反映，自己的电脑出现了虽然网络连接正常但无法上网的情况，这让他们感到非常困扰。其实，类似的问题也困扰着不少其他用户，因此，本期文章将为大家介绍几种解决win10网络通但不能上网的方法。以下是具体的处理步骤：方法一： 1、按下…

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

windows8的“同步你的设置”功能怎么关闭_windows8关闭同步功能方法

首先关闭Windows 8的同步功能，进入“更多电脑设置”中的“同步你的设置”，将“在此电脑上同步设置”关闭；随后可点击底部“删除”按钮清除云端历史数据，确保隐私安全。如果您在使用Windows 8系统时希望停止个人设置的跨设备同步，可能是因为更换了主要使用设备或出于隐私保护考虑。关闭该功能可以防…

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

VSCode如何配置Dart开发环境 VSCode跨平台应用开发全攻略

安装vscode并下载flutter sdk，将其bin目录添加到系统path环境变量；2. 在vscode中安装flutter扩展（自动包含dart扩展）；3. 运行flutter doctor检查并修复环境配置问题，如android/ios工具链；4. 通过flutter create创建项目或…

程序猿
2026年9月25日
1000
win10去除快捷方式小箭头方法

1. 如何移除win10快捷方式的小箭头首先，在桌面上创建一个新的文本文档，接着将以下代码粘贴进去： reg add “HKEY_LOCAL_MACHINESOFTWAREMicrosoftWindowsCurrentVersionExplorerShell Icons” …

程序猿
2026年9月25日 • 用户投稿
1000
Java ParallelStream线程池管理：定制并发与I/O优化

本文深入探讨了Java ParallelStream的线程池管理，特别是如何在I/O密集型任务（如数据库查询）中定制其并发行为。我们将介绍如何通过自定义ForkJoinPool来限制ParallelStream的线程数量，并强调在处理数据库操作时，除了线程池大小，还需关注数据库连接数等关键资源，并讨…

程序猿
2026年9月25日 • 用户投稿
1000
UC浏览器怎么锁定标签页防止误关_UC浏览器固定标签页功能使用方法

可通过锁定标签页防止UC浏览器误关网页。首先打开目标页面，点击右上角标签页图标后长按页面选择“固定标签页”，成功后显示图钉图标；其次可将常用网页设为常驻页面，通过书签或历史记录长按条目选择“添加到固定标签”实现启动时自动加载；最后若功能受限，可创建桌面快捷方式，从桌面直接进入重要页面，结合最近标签恢…

程序猿
2026年9月25日 • 用户投稿
0000
sublime怎么连接sftp服务器_sublime SFTP服务器连接教程

首先安装SFTP插件并配置sftp-config.json文件，设置host、user、remote_path等参数，保存后可通过右键菜单上传下载文件，支持自动同步与SSH密钥认证，注意避免密码泄露和编码问题。使用Sublime Text连接SFTP服务器，可以通过安装SFTP插件实现文件的远程编…

程序猿
2026年9月25日 • 用户投稿
0000
Win10系统找不到启动设备是什么情况？

在使用 win10 系统时，有时会遇到找不到启动设备的问题，这种提示往往令人困惑。那么，出现这种情况的原因是什么？又该如何解决呢？本文将为大家介绍一些有效的解决办法，希望能帮到大家。 Win10系统找不到启动设备的解决步骤： 1] 检查启动设备的连接如果您的电脑是组装机类型，建议先关闭电源，打开机…

程序猿
2026年9月25日 • 用户投稿
13000
控制Java ParallelStream线程池大小与并发优化：策略与最佳实践

本文探讨如何有效管理Java ParallelStream的线程池大小，特别是在涉及数据库查询等I/O密集型操作时。我们将介绍通过自定义ForkJoinPool来限制ParallelStream线程的方法，并强调在处理I/O任务时，结合CompletableFuture与专用执行器的重要性。同时，文…

程序猿
2026年9月25日 • 用户投稿
1000
x浏览器兼容模式怎么设置_x浏览器IE兼容模式设置与使用

开启x浏览器的IE兼容模式可解决网页显示异常问题。首先点击菜单进入设置，打开高级设置中的“IE兼容模式”开关；其次在“站点设置”的兼容性视图中添加特定网址，实现自动适配；最后对于临时需求，可通过地址栏的盾牌图标选择“使用IE内核重新加载”即时切换，确保老旧网站正常访问。如果您在使用x浏览器时遇到某…

程序猿
2026年9月25日 • 用户投稿
1000
Java Stream API：高效处理列表数据，按组合键去重并选择最新记录

本文详细介绍了如何利用Java Stream API，特别是Collectors.toMap，对包含重复条目的对象列表进行高级过滤。教程将演示如何根据对象的多个字段（如姓名组合）确定唯一性，并在出现重复时，根据特定字段（如日期）选择最新或最符合条件的记录，从而实现数据的高效聚合与筛选。业务场景与问…

程序猿
2026年9月25日 • 用户投稿
2000
微软确认Windows 11和10打印问题，HP Smart App引发疑虑

N软网报道，微软近期确认，Windows 11与10用户正经历一系列令人头疼的打印故障。问题的核心在于HP Smart App，其相关文档已在官方Windows健康仪表板中更新，详细描述了这一异常状况。据反馈，HP Smart App可能会未经授权地侵入电脑，更改打印机名称及图标设置，导致诸如点击打…

程序猿
2026年9月25日 • 用户投稿
2000
悟空浏览器如何屏蔽图片加载_悟空浏览器无图模式开启方法

1、可通过设置菜单开启无图模式，进入浏览器设置后启用“节省流量”功能；2、可临时切换当前页面为无图浏览，点击底部操作栏的“省流模式”按钮实现快速切换；3、高级用户能通过自定义脚本，在用户脚本管理中添加CSS代码隐藏所有图片。如果您在使用悟空浏览器时希望减少数据流量消耗或提升网页加载速度，可以选择关…

程序猿
2026年9月25日 • 用户投稿
2000
sublime如何高亮vue文件语法 _sublime Vue语法高亮方法

安装Vue Syntax Highlight插件可让Sublime Text正确高亮.vue文件，支持template、script和style区块的语法着色，提升编辑体验。要让 Sublime Text 正确高亮 Vue 文件语法，关键是将 .vue 文件识别为支持的语法格式。Vue 单文件组件…

程序猿
2026年9月25日 • 用户投稿
3000
夸克怎么设置字体大小_网页浏览字体调整方法

1、打开夸克浏览器点击菜单进入设置，选择字体大小并拖动滑块调整至合适尺寸，网页将自动重绘；2、浏览时可用双指缩放手势临时调节当前页面字体大小；3、在手机系统设置中调整辅助功能里的字体大小，并在夸克中开启同步选项以实现全局一致阅读体验。如果您在使用夸克浏览器时发现网页文字过小或过大，影响阅读体验，可…

程序猿
2026年9月25日 • 用户投稿
1000
sublime怎么快速切换文件语法类型_sublime修改文件语言类型的方法

点击状态栏语言名可快速切换语法类型，立即应用高亮规则；2. 用Ctrl+Shift+P或Cmd+Shift+P打开命令面板，输入Set Syntax选择目标语言；3. 通过“Open all with current extension as…”设置默认语法关联，或手动编辑配置文件，使特…

程序猿
2026年9月25日 • 用户投稿
3000
Stable Diffusion精炼关键词公式：构图+主体+细节+风格+画质

stable diffusion关键词公式的核⼼是通过结构化描述提升图像生成的精准度和表现力，其核心要素包括构图、主体、细节、风格和画质。1. 构图决定画面布局与视角，涵盖视角（如全身像、特写）、取景范围（如黄金分割）、景深（如浅景深突出主体）、光线（如伦勃朗光）和透视（如一点透视）；2. 主体是画…

程序猿
2026年9月25日 • 用户投稿
1000
AMD下代Zen6 CPU大变革！转向全新D2D互连：能效延迟双飞跃

9月29日消息，据最新报道，amd正计划在未来的zen 6处理器中采用全新的d2d（die-to-die）互连技术，以替代沿用多年的serdes方案，而这一变革的初步迹象已在即将推出的strix halo apu上显现。自Zen 2架构以来，AMD一直依赖SERDES PHY技术实现多个CCD（计…

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