原创投稿
  1. 创想鸟首页
  2. 用户投稿

JavaScript实现HTML表格多列数据过滤教程

程序猿 • • 用户投稿

JavaScript实现HTML表格多列数据过滤教程

本教程详细介绍了如何使用javascript实现html表格的多列数据过滤功能。针对w3schools基础教程仅支持单列过滤的限制，文章通过修改javascript逻辑，引入嵌套循环遍历每行所有单元格，判断搜索关键词是否匹配任意列数据，从而实现更灵活、强大的多列模糊搜索，显著提升用户在大型数据表格中的查找效率。

JavaScript实现HTML表格多列数据过滤教程

在Web开发中，为HTML表格添加搜索或过滤功能是提升用户体验的常见需求。用户可能希望根据输入的关键词，在表格的多个列中查找匹配项，并动态显示或隐藏相应的行。本教程将基于常见的JavaScript表格过滤示例，详细讲解如何将其扩展为支持多列数据过滤。

基础单列过滤机制回顾

许多开发者在实现表格过滤时，会参考W3Schools等提供的基础JavaScript示例。该方法的核心思想是获取用户输入，然后遍历表格的每一行，检查指定列（例如第一列）的内容是否包含搜索关键词。

以下是典型的单列过滤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）进行过滤。如果需要过滤其他列，只需更改索引值即可。然而，这种方法无法同时在多个列中进行搜索。

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

实现多列数据过滤

要实现多列数据过滤，我们需要修改核心逻辑：不再局限于检查单个单元格，而是遍历当前行的所有单元格。只要行中的任何一个单元格包含搜索关键词，该行就应该被显示。

核心思路如下：

遍历所有行：保持外层循环不变。遍历当前行的所有单元格：在每行内部，添加一个内层循环来遍历该行的所有元素。标记匹配状态：引入一个布尔变量（例如foundMatchInRow），在内层循环中，一旦找到任何一个单元格匹配关键词，就将其设置为true。决定行显示状态：内层循环结束后，根据foundMatchInRow的值来决定显示或隐藏整行。重置标记：在外层循环的每次迭代开始时，重置foundMatchInRow为false，以确保每行的判断是独立的。

以下是实现多列过滤的JavaScript代码：

function myFunction() {  var input, filter, table, tr, i, txtValue;  var foundMatchInRow = false; // 用于标记当前行是否找到匹配项  input = document.getElementById("myInput");  filter = input.value.toUpperCase();  table = document.getElementById("myTable");  // 获取 tbody 中的所有数据行，避免处理 thead 中的行  var tbody = table.querySelector('tbody');  if (!tbody) { // 如果没有 tbody，则直接获取 table 下的所有 tr，但需注意表头处理      tr = table.getElementsByTagName("tr");  } else {      tr = tbody.getElementsByTagName("tr");  }  // 遍历所有表格数据行  for (i = 0; i < tr.length; i++) {    // 获取当前行的所有单元格（td）    let tds = tr[i].getElementsByTagName("td");    foundMatchInRow = false; // 重置每行的匹配状态    // 遍历当前行的所有单元格    for (let j = 0; j  -1) {          foundMatchInRow = true; // 只要有一个单元格匹配，就标记为true          break; // 找到匹配项后，即可跳出内层循环，无需检查该行其他单元格        }      }    }    // 根据是否找到匹配项来决定显示或隐藏整行    if (foundMatchInRow) {      tr[i].style.display = ""; // 显示该行    } else {      tr[i].style.display = "none"; // 隐藏该行    }  }}

完整示例代码

为了演示上述多列过滤功能，我们需要一个包含输入框和表格的HTML结构。请注意，id=”myTable”应该应用于包含实际数据行的

元素或整个元素。为了更健壮，我们建议

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

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

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

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
php网站数据库索引怎么合理优化_php网站数据库索引设置与查询性能提升方法
上一篇 2025年12月12日 18:36:23
解决PHP header() 重定向失败：原理、原因与实践
下一篇 2025年12月12日 18:36:36

相关推荐

  • firefox浏览器如何阻止视频自动播放 Firefox浏览器禁止网页视频自动播放设置

    firefox浏览器如何阻止视频自动播放 Firefox浏览器禁止网页视频自动播放设置firefox浏览器如何阻止视频自动播放 Firefox浏览器禁止网页视频自动播放设置firefox浏览器如何阻止视频自动播放 Firefox浏览器禁止网页视频自动播放设置firefox浏览器如何阻止视频自动播放 Firefox浏览器禁止网页视频自动播放设置

    Firefox可通过设置阻止视频自动播放，提升浏览体验。首先在“隐私与安全”中将自动播放下拉菜单改为“阻止”；其次可针对特定网站单独设置允许或禁止；还可安装“AutoplayStopper”等扩展增强控制；高级用户可修改about:config中的media.autoplay.default值为2以…

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

  • sublime如何禁用拼写检查_sublime关闭拼写检查方法

    sublime如何禁用拼写检查_sublime关闭拼写检查方法sublime如何禁用拼写检查_sublime关闭拼写检查方法sublime如何禁用拼写检查_sublime关闭拼写检查方法sublime如何禁用拼写检查_sublime关闭拼写检查方法

    Sublime Text默认开启拼写检查，可用红色波浪线标记疑似错误；2. 可通过菜单临时关闭当前文件的拼写检查；3. 修改用户设置添加”spell_check”: false可永久全局关闭；4. 针对特定语言语法文件添加该配置则仅关闭对应类型文件的检查；5. 关闭后红色波浪…

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

  • 计算循环迭代次数并与其他类中的迭代次数进行比较的教程

    计算循环迭代次数并与其他类中的迭代次数进行比较的教程计算循环迭代次数并与其他类中的迭代次数进行比较的教程计算循环迭代次数并与其他类中的迭代次数进行比较的教程计算循环迭代次数并与其他类中的迭代次数进行比较的教程

    本文旨在解决在Java程序中统计循环迭代次数，并将其与其他方法或类中的迭代次数进行比较的问题。通过示例代码，我们将展示如何创建一个结果对象来同时返回计算结果和迭代次数，避免使用全局计数器变量，确保每次调用都能获得准确的迭代次数统计。 在程序开发中，经常需要统计循环的迭代次数，尤其是在比较不同算法的效…

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

  • sublime怎么预览markdown文件_sublime渲染Markdown文件的方法

    sublime怎么预览markdown文件_sublime渲染Markdown文件的方法sublime怎么预览markdown文件_sublime渲染Markdown文件的方法sublime怎么预览markdown文件_sublime渲染Markdown文件的方法sublime怎么预览markdown文件_sublime渲染Markdown文件的方法

    Sublime Text需通过插件实现Markdown预览，1. 先安装Package Control管理工具；2. 用其安装Markdown Preview插件；3. 通过命令面板选择“Preview in Browser”在浏览器中实时预览渲染效果，支持多种语法风格，配合自动保存和外部工具可提升…

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

  • Android Plurals 正确使用指南

    Android Plurals 正确使用指南Android Plurals 正确使用指南Android Plurals 正确使用指南Android Plurals 正确使用指南

    本文旨在详细讲解 Android 中 Plurals 的正确使用方法，避免常见的错误用法。通过示例代码和注意事项，帮助开发者理解如何利用 Plurals 实现应用的多语言支持，从而提升用户体验。本文将重点介绍如何定义和使用 Plurals 资源，以及在不同语言环境下正确显示单复数形式。 Plural…

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

  • 使用正则表达式判断字符串中字符是否全部唯一

    使用正则表达式判断字符串中字符是否全部唯一使用正则表达式判断字符串中字符是否全部唯一使用正则表达式判断字符串中字符是否全部唯一使用正则表达式判断字符串中字符是否全部唯一

    本文介绍如何使用Java正则表达式来判断一个字符串中的所有字符是否都是唯一的。我们将探讨一种使用正则表达式检测字符串中是否存在重复字符的方法，并提供相应的Java代码示例。通过本文，你将学习如何利用正则表达式的强大功能来解决字符串处理中的常见问题。 在字符串处理中，经常需要判断一个字符串中的字符是否…

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

  • 获取物品名称并转换为字符串时出现乱码的解决方案

    获取物品名称并转换为字符串时出现乱码的解决方案获取物品名称并转换为字符串时出现乱码的解决方案获取物品名称并转换为字符串时出现乱码的解决方案获取物品名称并转换为字符串时出现乱码的解决方案

    本文旨在解决在 Minecraft Spigot 插件开发中，获取玩家放置的物品名称并尝试将其转换为字符串时出现乱码的问题。通过分析问题原因，并提供正确的代码示例，帮助开发者避免类似错误，从而更有效地获取玩家名称。 在 Spigot 插件开发中，当玩家放置方块时，我们可能需要获取该方块对应的玩家名称…

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

  • Bukkit插件开发：正确处理物品显示名称与玩家识别

    Bukkit插件开发：正确处理物品显示名称与玩家识别Bukkit插件开发：正确处理物品显示名称与玩家识别Bukkit插件开发：正确处理物品显示名称与玩家识别Bukkit插件开发：正确处理物品显示名称与玩家识别

    本文旨在解决Bukkit插件开发中，从BlockPlaceEvent获取物品显示名称并将其用于玩家识别时常见的“乱码”问题。我们将深入探讨Component对象与纯文本字符串的区别，并提供两种核心解决方案：直接获取放置方块的玩家名称，以及如何正确地将Component转换为纯文本字符串，以避免不必要…

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

  • sublime怎么折叠所有代码_sublime代码折叠快捷方法

    sublime怎么折叠所有代码_sublime代码折叠快捷方法sublime怎么折叠所有代码_sublime代码折叠快捷方法sublime怎么折叠所有代码_sublime代码折叠快捷方法sublime怎么折叠所有代码_sublime代码折叠快捷方法

    Sublime Text 支持多种代码折叠快捷键，Windows/Linux 使用 Ctrl + Shift + [/] 折叠/展开代码块，Ctrl + K, Ctrl + 1 展开所有用 Ctrl + K, Ctrl + J，macOS 用户将 Ctrl 替换为 Command。 在 Sublim…

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

  • 解析音调调整指令：一个Java教程

    解析音调调整指令：一个Java教程解析音调调整指令：一个Java教程解析音调调整指令：一个Java教程解析音调调整指令：一个Java教程

    本文旨在提供一个清晰易懂的Java教程，用于解析包含音调调整指令的字符串。通过使用正则表达式，我们可以从复杂的输入字符串中提取乐器名称、调整方向和调整量。本教程将详细解释代码实现，并提供示例，帮助读者理解如何在Java中处理这类问题。 使用正则表达式解析音调调整指令 在音乐领域，音调的微调至关重要。…

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

  • Java字符串高级解析：使用正则表达式处理复杂指令模式

    Java字符串高级解析：使用正则表达式处理复杂指令模式Java字符串高级解析：使用正则表达式处理复杂指令模式Java字符串高级解析：使用正则表达式处理复杂指令模式Java字符串高级解析：使用正则表达式处理复杂指令模式

    本教程演示如何使用Java的java.util.regex包，通过正则表达式高效解析包含多条调音指令的复杂字符串。我们将学习构建匹配特定模式的正则表达式，并利用Pattern和Matcher类从输入字符串中准确提取乐器名称、调音方向和数值，从而将原始指令转换为清晰可读的输出格式。 1. 问题背景与挑…

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

  • Java中整数类型溢出行为详解：二进制补码与循环特性

    Java中整数类型溢出行为详解：二进制补码与循环特性Java中整数类型溢出行为详解：二进制补码与循环特性Java中整数类型溢出行为详解：二进制补码与循环特性Java中整数类型溢出行为详解：二进制补码与循环特性

    Java中原始整数类型在处理超出其范围的数值时，会遵循一种基于二进制补码的循环溢出机制。这意味着当正数溢出时会“回卷”为负数，反之亦然，如同数字在一个有限的圆环上循环。理解这一特性对于准确预测类型转换和算术运算结果至关重要。 计算机中的数值表示：位、字节与二进制 在计算机底层，所有数据都以二进制形式…

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

  • Java数据类型溢出：原理、预测与避免

    Java数据类型溢出：原理、预测与避免Java数据类型溢出：原理、预测与避免Java数据类型溢出：原理、预测与避免Java数据类型溢出：原理、预测与避免

    本文旨在深入解析Java中数据类型溢出的现象，阐述其背后的二进制补码原理，并提供预测溢出结果的方法。通过理解数据在计算机中的存储方式，以及溢出时数值的循环特性，开发者可以更好地掌握Java中的数据类型，避免潜在的错误。 数据在计算机中的存储：二进制补码 计算机底层使用二进制（bits）来表示所有数据…

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

  • Java中数据类型溢出的原理及预测方法

    Java中数据类型溢出的原理及预测方法Java中数据类型溢出的原理及预测方法Java中数据类型溢出的原理及预测方法Java中数据类型溢出的原理及预测方法

    本文旨在阐明Java中当数值超出所选数据类型范围时发生的溢出现象，并提供预测溢出结果的方法。文章将深入探讨计算机中数值的存储方式，特别是补码表示法，以及溢出时数值如何“环绕”的原理。通过理解这些概念，读者可以准确预测Java中数据类型溢出的结果。 理解计算机中的数值表示：补码 在计算机中，所有数据最…

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

  • 使用 DynamoDBMapper 进行条件更新操作

    使用 DynamoDBMapper 进行条件更新操作使用 DynamoDBMapper 进行条件更新操作使用 DynamoDBMapper 进行条件更新操作使用 DynamoDBMapper 进行条件更新操作

    本文将介绍如何利用 DynamoDBMapper 在 Java 中执行基于当前值的条件更新操作，特别是使用 “ADD” 操作来递减账户余额。虽然 DynamoDBMapper 默认不支持直接使用更新表达式，但通过配置 SaveBehavior，可以实现类似的效果。 Dynam…

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

  • 解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题

    解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题解决JavaFX应用导出为可运行JAR后FXMLLoader资源加载失败的问题

    本文旨在解决JavaFX应用在Eclipse中正常运行，但导出为可运行JAR包后，因FXMLLoader无法找到FXML资源文件而抛出IllegalStateException: Location is not set异常的问题。核心解决方案是调整FXMLLoader.setLocation()方法…

    程序猿的头像 程序猿
    2026年9月25日 • 用户投稿
    200
  • Java多态中成员变量是否具有动态绑定特性 用户投稿

    Java多态中成员变量是否具有动态绑定特性

    成员变量不具有动态绑定特性，其访问基于引用变量的声明类型而非实际对象类型。例如，当父类和子类存在同名成员变量时，通过父类引用访问该变量将获取父类中的值，即使实际对象是子类实例。这体现了静态绑定，即在编译期确定访问的变量。相比之下，实例方法支持动态绑定（后期绑定），在运行时根据对象的实际类型决定调用哪…

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

  • Java 中处理货币数据的正确方式

    Java 中处理货币数据的正确方式Java 中处理货币数据的正确方式Java 中处理货币数据的正确方式Java 中处理货币数据的正确方式

    在 Java 应用程序中，尤其是在处理财务数据时，选择正确的数据类型至关重要。货币数据通常以特定的格式呈现，例如包含货币符号（如美元符号 $）和千位分隔符（如逗号 ,）。直接将这些数据映射到 DTO 类时，我们需要仔细考虑数据类型的选择，以避免潜在的精度损失和计算错误。 货币数据类型选择考量 常见的…

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

  • Java 中处理货币数据的最佳实践

    Java 中处理货币数据的最佳实践Java 中处理货币数据的最佳实践Java 中处理货币数据的最佳实践Java 中处理货币数据的最佳实践

    本文旨在探讨在 Java 中处理货币数据的最佳实践。面对 JSON 数据中包含的货币值（例如 “$234,205,860″），直接使用 String 存储是一种选择，但可能并非最优。本文将深入分析各种数据类型在处理货币时的优劣，并推荐使用 BigDecimal 进行精确计算，…

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

  • Java向上转型中可变参数方法调用的行为解析：重载与编译时绑定的深层机制

    Java向上转型中可变参数方法调用的行为解析：重载与编译时绑定的深层机制Java向上转型中可变参数方法调用的行为解析：重载与编译时绑定的深层机制Java向上转型中可变参数方法调用的行为解析：重载与编译时绑定的深层机制Java向上转型中可变参数方法调用的行为解析：重载与编译时绑定的深层机制

    本文深入探讨Java中向上转型、方法重载与可变参数（varargs）的交互机制。通过具体代码示例，详细解释了在向上转型场景下，为何编译器会基于引用变量的编译时类型来解析方法调用，即使子类存在看似更匹配的重载方法。核心在于方法重载是编译时决策，而可变参数在重载解析中具有较低的优先级。理解这些机制对于编…

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

发表回复

登录后才能评论
关注微信