投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. 好文分享

JavaScript实现HTML表格多列搜索过滤功能教程

程序猿 • • 好文分享 • 阅读 0

JavaScript实现HTML表格多列搜索过滤功能教程

本教程详细介绍了如何利用javascript增强html表格的搜索功能。通过修改基础的单列过滤逻辑，我们将实现一个高效的多列文本搜索方案，使用户能够在一个输入框中同时对表格的多个字段（如姓名、国家）进行模糊匹配，从而显著提升数据检索的灵活性和用户体验。

在网页开发中，表格是展示结构化数据的重要方式，而为表格添加搜索过滤功能则是提升用户体验的关键一环。当数据量较大时，用户往往需要根据多个条件进行筛选。本文将指导您如何使用纯JavaScript实现一个支持多列搜索的HTML表格过滤功能，允许用户在一个搜索框中同时匹配表格中的不同列数据。

HTML结构准备

首先，我们需要一个包含输入框和数据表格的基础HTML结构。搜索输入框将用于接收用户的查询文本，而表格则包含需要被过滤的数据。

  
    姓名    国家  
  
    Alfreds Futterkiste    德国  
  
    Berglunds snabbkop    瑞典  
  
    Island Trading    英国  
  
    Koniglich Essen    德国

在这个结构中：

id=”myInput”：搜索输入框的唯一标识符。onkeyup=”myFunction()”：当用户在输入框中松开按键时，会触发myFunction函数。placeholder：提示用户搜索的内容。id=”myTable”：数据表格的唯一标识符。表格包含一个表头 () 和多行数据 (，每行包含两个 单元格：姓名和国家）。

JavaScript多列搜索逻辑实现

接下来，我们将编写myFunction函数来处理搜索逻辑。核心思想是遍历表格的每一行，获取指定列（例如第一列和第二列）的文本内容，然后判断这些内容是否包含用户的搜索关键词。如果包含，则显示该行；否则，隐藏该行。

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

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");  // 遍历所有表格行（跳过表头行，如果表头行有class="header"可以从1开始）  // 注意：此处假设第一行是表头，所以从索引1开始遍历数据行  for (i = 0; i < tr.length; i++) {    // 获取当前行的第一个和第二个元素    td = tr[i].getElementsByTagName("td")[0]; // 第一列 (姓名)    td1 = tr[i].getElementsByTagName("td")[1]; // 第二列 (国家)    // 确保当前行至少有第一个元素    if (td) {      // 获取第一个的文本内容      txtValue = td.textContent || td.innerText;      // 获取第二个的文本内容      // 注意：如果td1可能不存在，此处应添加td1的检查，见“注意事项”      txtValue1 = td1 ? (td1.textContent || td1.innerText) : "";       // 判断任一列的文本内容是否包含搜索关键词      if (txtValue.toUpperCase().indexOf(filter) > -1 || txtValue1.toUpperCase().indexOf(filter) > -1) {        tr[i].style.display = ""; // 显示匹配的行      } else {        tr[i].style.display = "none"; // 隐藏不匹配的行      }    }  }}

代码解析

变量声明: input, filter, table, tr, td, td1, i, txtValue, txtValue1 等变量用于存储DOM元素、搜索关键词、循环索引和单元格文本。获取搜索关键词:input = document.getElementById(“myInput”); 获取输入框元素。filter = input.value.toUpperCase(); 获取用户输入的文本，并将其转换为大写，以便进行不区分大小写的匹配。获取表格行:table = document.getElementById(“myTable”); 获取表格元素。tr = table.getElementsByTagName(“tr”); 获取表格中所有的元素（包括表头）。遍历表格行:for (i = 0; i 重要提示: 如果您的表头行有特定的类名（如class=”header”），并且不希望它被过滤，您可以将循环起始索引设置为 i = 1 来跳过它。获取单元格内容:td = tr[i].getElementsByTagName(“td”)[0]; 获取当前行的第一个元素。td1 = tr[i].getElementsByTagName(“td”)[1]; 获取当前行的第二个元素。文本提取与条件判断:if (td): 确保当前行存在至少一个元素，防止因空行或格式错误导致脚本中断。txtValue = td.textContent || td.innerText;: 提取元素的文本内容。textContent是标准属性，innerText是旧版IE兼容属性。txtValue1 = td1 ? (td1.textContent || td1.innerText) : “”;: 同样提取第二个的文本。这里添加了一个三元运算符 td1 ? … : “” 来确保在 td1 不存在时不会尝试访问其属性，从而避免潜在的运行时错误。if (txtValue.toUpperCase().indexOf(filter) > -1 || txtValue1.toUpperCase().indexOf(filter) > -1): 这是实现多列搜索的核心。它检查第一个单元格的文本（转换为大写）是否包含搜索关键词，或者第二个单元格的文本（转换为大写）是否包含搜索关键词。只要任一条件满足，该行就应该显示。tr[i].style.display = “”;: 如果匹配成功，设置行的display样式为空字符串，使其显示。tr[i].style.display = “none”;: 如果不匹配，设置行的display样式为none，使其隐藏。

注意事项与优化

鲁棒性: 在上面的示例代码中，我们已经对td1的访问进行了改进，确保了即使某些行没有足够的列，脚本也能正常运行。对于更复杂的表格，您可能需要更通用的方法来获取所有相关列的文本，例如遍历所有元素。性能: 对于包含数千甚至数万行的大型表格，每次按键都遍历所有行可能会导致性能问题。在这种情况下，可以考虑以下优化：去抖动 (Debouncing)：在用户停止输入一段时间后才执行搜索，而不是每次按键都执行。虚拟滚动 (Virtual Scrolling)：只渲染可见区域的行。服务器端搜索: 将搜索任务交给服务器处理，尤其是当数据量巨大时。多列动态选择: 如果您希望用户可以动态选择要搜索的列，可以添加复选框或下拉菜单，然后根据用户的选择动态构建搜索条件。正则表达式搜索: 对于更复杂的搜索模式，可以使用JavaScript的正则表达式（RegExp）代替indexOf。

总结

通过上述步骤，我们成功地为HTML表格添加了强大的多列搜索过滤功能。这个简单的JavaScript解决方案显著提升了用户在大型数据集中查找信息的效率和体验。您可以根据实际需求，在此基础上进行扩展和优化，例如增加更多列的搜索支持、提供更高级的搜索选项，或结合其他JavaScript库以实现更复杂的交互。

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

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

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

关于作者

程序猿的头像

程序猿签约作者

414.1K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月20日 22:14:27
下一篇 2025年12月20日 22:14:37

相关推荐

  • 学会从头开始学习CSS，掌握制作基本网页框架的技巧 好文分享

    学会从头开始学习CSS，掌握制作基本网页框架的技巧

    从零开始学习CSS，掌握网页基本框架制作技巧 前言： 在现今互联网时代，网页设计和开发是一个非常重要的技能。而学习CSS（层叠样式表）是掌握网页设计的关键之一。CSS不仅可以为网页添加样式和布局，还可以为用户呈现独特且具有吸引力的页面效果。在本文中，我将为您介绍一些基本的CSS知识，以及一些常用的代…

    程序猿的头像 程序猿
    2025年12月24日
    200
  • 揭秘Web标准涵盖的语言：了解网页开发必备的语言范围 好文分享

    揭秘Web标准涵盖的语言：了解网页开发必备的语言范围

    在当今数字时代，互联网成为了人们生活中不可或缺的一部分。作为互联网的基本构成单位，网页承载着我们获取和分享信息的重要任务。而网页开发作为一门独特的技术，离不开一些必备的语言。本文将揭秘Web标准涵盖的语言，让我们一起了解网页开发所需的语言范围。 首先，HTML（HyperText Markup La…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • 揭开Web开发的语言之谜：了解构建网页所需的语言有哪些？ 好文分享

    揭开Web开发的语言之谜：了解构建网页所需的语言有哪些？

    Web标准中的语言大揭秘：掌握网页开发所需的语言有哪些？ 随着互联网的快速发展，网页开发已经成为人们重要的职业之一。而要成为一名优秀的网页开发者，掌握网页开发所需的语言是必不可少的。本文将为大家揭示Web标准中的语言大揭秘，介绍网页开发所需的主要语言。 HTML（超文本标记语言）HTML是网页开发的…

    程序猿的头像 程序猿
    2025年12月24日
    400
  • 常用的网页开发语言：了解Web标准的要点 好文分享

    常用的网页开发语言：了解Web标准的要点

    了解Web标准的语言要点：常见的哪些语言应用在网页开发中？ 随着互联网的不断发展，网页已经成为人们获取信息和交流的重要途径。而要实现一个高质量、易用的网页，离不开一种被广泛接受的Web标准。Web标准的制定和应用，涉及到多种语言和技术，本文将介绍常见的几种语言在网页开发中的应用。 首先，HTML（H…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • 网页开发中常见的Web标准语言有哪些？ 好文分享

    网页开发中常见的Web标准语言有哪些？

    探索Web标准语言的世界：网页开发中常用的语言有哪些？ 在现代社会中，互联网的普及程度越来越高，网页已成为人们获取资讯、娱乐、交流的重要途径。而网页的开发离不开各种编程语言的应用和支持。在这个虚拟世界的网络，有许多被广泛应用的标准化语言，用于为用户提供优质的网页体验。本文将探索网页开发中常用的语言，…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • 深入探究Web标准语言的范围，涵盖了哪些语言？ 好文分享

    深入探究Web标准语言的范围，涵盖了哪些语言？

    Web标准是指互联网上的各个网页所需遵循的一系列规范，确保网页在不同的浏览器和设备上能够正确地显示和运行。这些标准包括HTML、CSS和JavaScript等语言。本文将深入解析Web标准涵盖的语言范围。 首先，HTML（HyperText Markup Language）是构建网页的基础语言。它使…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • 项目实践：如何结合CSS和JavaScript打造优秀网页的经验总结 好文分享

    项目实践：如何结合CSS和JavaScript打造优秀网页的经验总结

    项目实践：如何结合CSS和JavaScript打造优秀网页的经验总结 随着互联网的快速发展，网页设计已经成为了各行各业都离不开的一项技能。优秀的网页设计可以给用户留下深刻的印象，提升用户体验，增加用户的黏性和转化率。而要做出优秀的网页设计，除了对美学的理解和创意的运用外，还需要掌握一些基本的技能，如…

    程序猿的头像 程序猿
    2025年12月24日
    200
  • CSS 超链接属性解析：text-decoration 和 color 好文分享

    CSS 超链接属性解析：text-decoration 和 color

    CSS 超链接属性解析：text-decoration 和 color 超链接是网页中常用的元素之一，它能够在不同页面之间建立连接。为了使超链接在页面中有明显的标识和吸引力，CSS 提供了一些属性来调整超链接的样式。本文将重点介绍 text-decoration 和 color 这两个与超链接相关的…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • 学完HTML和CSS之后我应该做什么？ 好文分享

    学完HTML和CSS之后我应该做什么？

    网页开发是一段漫长的旅程，但是掌握了HTML和CSS技能意味着你已经赢得了一半的战斗。这两种语言对于学习网页开发技能来说非常重要和基础。现在不可或缺的是下一个问题，学完HTML和CSS之后我该做什么呢？ 对这些问题的答案可以分为2-3个部分，你可以继续练习你的HTML和CSS编码，然后了解在学习完H…

    程序猿的头像 程序猿
    2025年12月24日
    000

  • 聊聊怎么利用CSS实现波浪进度条效果

    本篇文章给大家分享css 高阶技巧，介绍一下如何使用css实现波浪进度条效果，希望对大家有所帮助！ 本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！ 在上两篇中，我们…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    200

  • 巧用距离、角度及光影制作炫酷的 3D 文字特效

    如何利用 css 实现3d立体的数字？下面本篇文章就带大家巧用视觉障眼法，构建不一样的 3d 文字特效，希望对大家有所帮助！ 最近群里有这样一个有意思的问题，大家在讨论，使用 CSS 3D 能否实现如下所示的效果： 这里的核心难点在于，如何利用 CSS 实现一个立体的数字？CSS 能做到吗？ 不是特…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • CSS高阶技巧：实现图片渐隐消的多种方法

    将专注于实现复杂布局，兼容设备差异，制作酷炫动画，制作复杂交互，提升可访问性及构建奇思妙想效果等方面的内容。 在兼顾基础概述的同时，注重对技巧的挖掘，结合实际进行运用，欢迎大家关注。 正文从这里开始。 在过往，我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是这样： 立即学习“前端…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 看看这些前端面试题，带你搞定高频知识点（一）

    每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。 面试官：给定一个元素，如何实现水平垂直居中？…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    300

  • 看看这些前端面试题，带你搞定高频知识点（二）

    每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。 面试官：页面导入样式时，使用 link 和 …

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    200

  • 看看这些前端面试题，带你搞定高频知识点（三）

    每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。 面试官：清除浮动有哪些方式？ 我：呃~，浮动…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 看看这些前端面试题，带你搞定高频知识点（四）

    每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。 面试官：请你谈一下自适应(适配)的方案 我：…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 看看这些前端面试题，带你搞定高频知识点（五）

    每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。 面试官：css 如何实现左侧固定 300px…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000
  • css实现登录按钮炫酷效果（附代码实例） 好文分享

    css实现登录按钮炫酷效果（附代码实例）

    今天在网上看到一个炫酷的登录按钮效果；初看时感觉好牛掰；但是一点一点的抛开以后发现，并没有那么难；我会将全部代码贴出来；如果有不对的地方，大家指点一哈。 分析 我们抛开before不谈的话；其实原理和就是通过背景大小以及配合位置达到颜色渐变的效果。 text-transform: uppercase…

    程序猿的头像 程序猿
    2025年12月24日
    000

  • CSS flex布局属性：align-items和align-content的区别

    在用flex布局时，发现有两个属性功能好像有点类似：align-items和align-content，乍看之下，它们都是用于定义flex容器中元素在交叉轴（主轴为flex-deriction定义的方向，默认为row，那么交叉轴跟主轴垂直即为column，反之它们互调，flex基本的概念如下图所示）…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 手把手教你用 transition 实现短视频 APP的点赞动画

    怎么使用纯 css 实现有趣的点赞动画？下面本篇文章就带大家了解一下巧妙借助 transition实现点赞动画的方法，希望对大家有所帮助！ 在各种短视频界面上，我们经常会看到类似这样的点赞动画： 非常的有意思，有意思的交互会让用户更愿意进行互动。 那么，这么有趣的点赞动画，有没有可能使用纯 CSS …

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

发表回复

登录后才能评论
关注微信