投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港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

关于作者

程序猿的头像

程序猿签约作者

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

相关推荐

  • 使用 JavaScript 正确地为 SVG 元素切换 CSS 类 好文分享

    使用 JavaScript 正确地为 SVG 元素切换 CSS 类

    本文旨在解决使用 JavaScript 的 `classList.toggle()` 方法无法正确地为 SVG 元素切换 CSS 类的问题。通过分析常见原因和提供解决方案，帮助开发者理解如何正确地操作 SVG 元素的样式，并实现预期的交互效果。 在使用 JavaScript 操作 SVG 元素时，你…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • React中正确使用textarea实现多行文本输入及滚动条样式定制 好文分享

    React中正确使用textarea实现多行文本输入及滚动条样式定制

    本文旨在纠正react应用中多行文本输入框的常见误区，强调应使用“而非“。文章将详细阐述如何正确实现多行文本输入，并通过css配置`overflow-y`属性来显示滚动条，同时提供webkit浏览器下自定义滚动条样式的指南，确保用户界面的功能性和美观性。 在构建Web应用时，我们经常需…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 为包含参数的 script 标签添加延迟加载 好文分享

    为包含参数的 script 标签添加延迟加载

    本文介绍了如何为包含 async 属性和自定义参数的 标签添加延迟加载。通过移除 async 属性并使用 setTimeout 函数，可以精确控制脚本的加载时机，从而优化页面加载性能和用户体验。 在 Web 开发中，有时我们需要延迟加载某些 JavaScript 脚本，以避免阻塞页面的初始渲染。当 …

    程序猿的头像 程序猿
    2025年12月20日
    000
  • V8 引擎是否存在基线编译器？深入理解 JavaScript 代码的执行流程 好文分享

    V8 引擎是否存在基线编译器？深入理解 JavaScript 代码的执行流程

    本文旨在阐明 V8 引擎中基线编译器的作用，并详细解释 JavaScript 代码从源代码到执行的完整流程。我们将探讨 V8 引擎的多种代码执行策略，包括解释器、基线编译器（Sparkplug）和优化编译器，以及它们在性能上的权衡。通过本文，你将更深入地了解 V8 引擎的内部机制，从而更好地优化你的…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 解决跨多标签字符串选取时范围改变的问题 好文分享

    解决跨多标签字符串选取时范围改变的问题

    本文旨在解决在使用 JavaScript 的 `range.surroundContents` 等方法处理跨多个 HTML 标签的文本选取时，由于 DOM 结构修改导致的选取范围错乱问题。通过提取选取内容，遍历子节点并重新构建 HTML，最终将修改后的 HTML 插回原位置，从而保持选取状态并实现预…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • JavaScript数组中查找指定元素索引并处理缺失情况的教程 好文分享

    JavaScript数组中查找指定元素索引并处理缺失情况的教程

    本教程旨在解决如何在javascript数组中查找特定元素（如’knife’和’fork’）的索引，并将结果封装成一个对象。重点讲解如何优雅地处理元素不存在的情况，使其对应索引值为-1。文章将介绍利用`array.prototype.indexof()…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 从JSON数据中提取特定条件的价格：使用Array.prototype.find 好文分享

    从JSON数据中提取特定条件的价格：使用Array.prototype.find

    本文旨在提供一种从JSON数据中的价格数组中，根据特定条件（例如 `is_rrp = true`）提取价格值的有效方法。我们将使用 JavaScript 的 `Array.prototype.find` 函数来实现这一目标，并提供详细的代码示例和解释，帮助开发者轻松地在类似场景中应用。 使用 Arr…

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

  • SVG 元素类名切换失败问题排查与解决方案

    本文旨在解决在使用 JavaScript 的 `classList.toggle()` 方法尝试切换 SVG 元素类名时遇到的问题。我们将分析可能导致该问题的原因，并提供可行的解决方案，确保类名切换能够正确生效，从而实现预期的视觉效果。 问题分析 直接使用 classList.toggle() 方法…

    程序猿的头像 程序猿
    好文分享 2025年12月20日
    000
  • HTML表单提交时函数未被调用的问题排查与解决 好文分享

    HTML表单提交时函数未被调用的问题排查与解决

    本文旨在帮助开发者解决HTML表单提交时JavaScript函数未被调用的问题。通过分析常见的错误原因，例如拼写错误、函数调用方式不正确以及表单结构问题，提供详细的排查步骤和修正方法，确保表单提交时能够正确执行验证或其他自定义逻辑。 在开发Web应用时，经常需要在表单提交时执行一些客户端验证或预处理…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • JavaScript数组中高效查找并返回指定元素索引对象教程 好文分享

    JavaScript数组中高效查找并返回指定元素索引对象教程

    本教程探讨如何在javascript数组中查找指定元素的索引位置，并将其封装在一个对象中返回。文章重点介绍如何利用`array.prototype.indexof()`方法高效地实现这一功能，同时处理元素不存在时返回-1的场景，并提供一种更通用的解决方案，以提高代码的简洁性和可维护性。 在JavaS…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 可视化编程：Canvas与WebGL高级图形处理 好文分享

    可视化编程：Canvas与WebGL高级图形处理

    Canvas提供2D绘图灵活控制，WebGL实现3D硬件加速，结合使用可兼顾性能与效率。 可视化编程在现代Web开发中越来越重要，尤其是在数据展示、游戏开发和交互式应用中。Canvas 和 WebGL 作为浏览器原生支持的图形渲染技术，提供了强大的绘图能力。理解它们的高级用法，有助于实现高性能、复杂…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • JavaScript动画引擎实现原理 好文分享

    JavaScript动画引擎实现原理

    JavaScript动画引擎通过requestAnimationFrame实现时间驱动，利用性能时间计算动画进度，结合缓动函数对属性进行插值更新，支持队列控制与链式调用，优化DOM操作以提升性能。 JavaScript动画引擎的核心在于控制元素在一段时间内的视觉变化，比如位置、大小、透明度等。它不依…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 获取自定义HTMLElement的父元素与子元素：JavaScript教程 好文分享

    获取自定义HTMLElement的父元素与子元素：JavaScript教程

    本文旨在帮助开发者理解如何在JavaScript中获取自定义HTMLElement的父元素和子元素。重点讲解了`connectedCallback`生命周期函数的使用，该函数在元素被插入到DOM后执行，是获取父元素的正确时机。此外，文章还提供了获取子元素的常用方法，并结合示例代码，帮助读者快速掌握相…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 为包含参数的 script 标签添加延迟加载的实现方法 好文分享

    为包含参数的 script 标签添加延迟加载的实现方法

    本文介绍如何为包含 async 属性和自定义 data 属性的 标签添加延迟加载效果。核心思路是移除 async 属性，并利用 setTimeout 函数在指定延迟后动态创建并插入 script 标签，从而实现延迟加载的目的。 通常情况下，带有 async 属性的 标签一旦下载完成就会立即执行，而无…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • V8 引擎中的基线编译器：Sparkplug 详解 好文分享

    V8 引擎中的基线编译器：Sparkplug 详解

    本文旨在深入解析 V8 JavaScript 引擎的执行流程，重点介绍基线编译器 Sparkplug 的作用。V8 引擎采用多层执行策略，包括解释器、基线编译器和优化编译器，以在编译速度和执行效率之间取得平衡。本文将详细阐述 Sparkplug 的定位、工作原理以及它在 V8 引擎中的重要性，帮助读…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 处理跨多个标签的字符串选区：避免 Range 对象修改后的选区重置 好文分享

    处理跨多个标签的字符串选区：避免 Range 对象修改后的选区重置

    本文探讨了在使用 javascript 的 `range.surroundcontents` 方法处理跨越多个 html 标签的文本选区时，可能出现的选区重置问题。通过分析问题原因，并提供一种通过提取选区内容、循环处理节点、重新构建 html 并插入文档的解决方案，帮助开发者避免选区丢失，实现对复杂…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 跨平台桌面应用开发（Electron） 好文分享

    跨平台桌面应用开发（Electron）

    Electron 因技术栈复用和跨平台优势被广泛采用，其架构包含主进程与渲染进程，通过 ipc 通信，适合熟悉 Web 技术的开发者快速构建桌面应用。 Electron 是目前最流行的跨平台桌面应用开发框架之一，它允许开发者使用前端技术（HTML、CSS、JavaScript）构建可在 Window…

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

  • 使用jQuery实现卡片内信息面板的折叠与展开（手风琴效果）

    本教程详细介绍了如何使用jquery高效地管理卡片（card）内部信息面板（div）的显示与隐藏。通过优化事件绑定机制，利用`closest()`和`find()`进行精确的dom元素定位，并提供两种核心切换逻辑：独立的面板切换和手风琴式（一次只展开一个）的面板切换，旨在帮助开发者构建更简洁、功能更…

    程序猿的头像 程序猿
    2025年12月20日 • 好文分享
    000
  • 创建类似宝可梦盒子功能的 Discord.js 指令并解决“无法发送空消息”错误 好文分享

    创建类似宝可梦盒子功能的 Discord.js 指令并解决“无法发送空消息”错误

    本文旨在解决在使用 Discord.js 和 MongoDB 创建类似宝可梦盒子功能的指令时，遇到的“无法发送空消息”错误。通过检查数据查询、消息构建和嵌入发送等关键步骤，提供详细的排查思路和解决方案，帮助开发者顺利实现该功能。 问题分析 在使用 Discord.js 创建指令时，经常会遇到 Dis…

    程序猿的头像 程序猿
    2025年12月20日
    000
  • 如何用JavaScript构建一个简单的区块链模拟？ 好文分享

    如何用JavaScript构建一个简单的区块链模拟？

    答案：用JavaScript构建简单区块链需定义区块结构和链式连接逻辑。1. 创建含索引、时间戳、数据、前后哈希的Block类，用SHA-256计算哈希；2. 实现Blockchain类，包含创世块、添加区块及验证链有效性方法；3. 示例中添加区块并验证完整性，篡改数据后链失效，体现不可篡改性。 用…

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

发表回复

登录后才能评论
关注微信