HTML 表格多列搜索过滤实现指南 (Google Apps Script)

本教程详细介绍了如何在 google apps script 项目中，为 html 表格实现多列动态搜索过滤功能。通过优化 javascript 代码，我们不再局限于单列搜索，而是能够遍历表格的每一行和每个单元格，从而实现对所有列内容的全面匹配，提升用户数据查找的灵活性和效率。

引言

在 Google Apps Script 项目中，经常需要将 Google Sheets 中的数据展示在自定义的 HTML 界面上。为了提升用户体验，为这些 HTML 表格添加搜索过滤功能是必不可少的。然而，常见的单列搜索实现方式往往无法满足用户对数据进行多维度查找的需求。本教程将指导您如何修改现有的 JavaScript 代码，实现一个功能更强大的、能够对表格所有列内容进行搜索的动态过滤功能。

核心问题与解决方案

原始的过滤逻辑通常只针对表格的某一特定列（例如 tableRows[i].cells[1]），这限制了搜索的范围。要实现多列搜索，我们需要扩展这个逻辑，使其能够检查一行中的所有单元格。

解决方案的核心思路是：

1. 获取用户输入的搜索文本。
2. 遍历表格的每一行。
3. 在每一行内部，再遍历该行的所有单元格。
4. 如果搜索文本在当前行的任意一个单元格中被找到，则显示该行；否则，隐藏该行。

实现多列搜索的代码示例

以下是经过优化后的 JavaScript 代码，实现了对 HTML 表格所有列的动态搜索过滤：

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

30

查看详情

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

/**
 * 处理输入框内容变化事件，实现表格多列搜索过滤。
 * 当用户在搜索框中输入文本时，此函数会被调用，
 * 遍历表格中的每一行，并在行的所有单元格中查找匹配的文本，
 * 从而决定显示或隐藏该行。
 */
function onInputChange() {
  // 获取用户输入的搜索文本，并转换为小写以便进行不区分大小写的匹配
  let inputText = document.getElementById("input-search").value.toString().toLowerCase();

  // 获取表格的主体元素和所有行
  let tableBody = document.getElementById("cursos");
  let tableRows = tableBody.getElementsByTagName("tr");

  // 遍历表格中的每一行
  for (let i = 0; i < tableRows.length; i++) {
    // 获取当前行的所有单元格（td 元素）
    let rowCells = tableRows[i].getElementsByTagName("td");
    let foundMatch = false; // 标志位，用于记录当前行是否找到匹配项

    // 遍历当前行的所有单元格
    for (let j = 0; j < rowCells.length; j++) {
      // 获取单元格的文本内容，并转换为小写
      let cellText = rowCells[j].textContent.toString().toLowerCase();

      // 检查搜索文本是否包含在当前单元格的文本中
      if (cellText.indexOf(inputText) !== -1) {
        foundMatch = true; // 找到匹配项
        break; // 在当前行找到匹配后，无需再检查该行的其他单元格，提高效率
      }
    }

    // 根据是否找到匹配项来决定行的可见性
    if (foundMatch) {
      tableRows[i].style.visibility = ""; // 显示该行
    } else {
      tableRows[i].style.visibility = "collapse"; // 隐藏该行
    }
  }
}

代码解析与要点

1. onInputChange() 函数： 这是事件处理函数，通常绑定到搜索输入框的 oninput 或 onkeyup 事件上。
2. 获取输入文本：

   let inputText = document.getElementById("input-search").value.toString().toLowerCase();

   登录后复制
   • document.getElementById("input-search")：获取 ID 为 input-search 的输入框元素。请确保您的 HTML 中有一个 <input type="text" id="input-search" oninput="onInputChange()"> 类似的元素。
   • .value：获取输入框的当前值。
   • .toString()：确保值是字符串类型。
   • .toLowerCase()：将输入文本转换为小写，实现不区分大小写的搜索。
3. 获取表格元素：

   let tableBody = document.getElementById("cursos");
   let tableRows = tableBody.getElementsByTagName("tr");

   登录后复制
   • document.getElementById("cursos")：获取 ID 为 cursos 的表格主体元素（通常是 <tbody> 或整个 <table>）。请确保您的 HTML 表格具有正确的 ID。
   • getElementsByTagName("tr")：获取表格中的所有行。
4. 外层循环（遍历行）：

   for (let i = 0; i < tableRows.length; i++) { ... }

   登录后复制

   此循环逐一处理表格中的每一行。

5. 内层循环（遍历单元格）：

   let rowCells = tableRows[i].getElementsByTagName("td");
   let foundMatch = false;
   for (let j = 0; j < rowCells.length; j++) { ... }

   登录后复制
   • tableRows[i].getElementsByTagName("td")：在当前行内部，获取所有 <td> 单元格。
   • foundMatch 标志位：在检查每一行之前，将其初始化为 false。一旦在该行的任何单元格中找到匹配项，就将其设置为 true。
6. 单元格文本处理与匹配：

   let cellText = rowCells[j].textContent.toString().toLowerCase();
   if (cellText.indexOf(inputText) !== -1) {
     foundMatch = true;
     break;
   }

   登录后复制
   • rowCells[j].textContent：获取当前单元格的纯文本内容。
   • .indexOf(inputText) !== -1：这是进行文本匹配的关键。如果 indexOf() 返回 -1，表示 inputText 不在 cellText 中；否则，表示找到匹配项。
   • break：这是一个重要的优化。一旦在当前行的任何一个单元格中找到了匹配项，就意味着该行应该被显示，因此可以立即跳出内层循环，无需再检查该行的其余单元格，从而提高性能。
7. 设置行可见性：

   if (foundMatch) {
     tableRows[i].style.visibility = "";
   } else {
     tableRows[i].style.visibility = "collapse";
   }

   登录后复制
   • tableRows[i].style.visibility = ""：将行的 visibility 样式设置为空字符串，使其恢复默认可见状态。
   • tableRows[i].style.visibility = "collapse"：将行的 visibility 样式设置为 collapse，使其在视觉上消失，并从布局中移除，但保留其在 DOM 中的位置。

注意事项与最佳实践

• HTML 结构： 确保您的 HTML 表格结构正确，包含 <table>、<tbody>（可选，但推荐）、<tr> 和 <td> 元素，并且表格主体或整个表格具有正确的 id（例如 cursos）。
• 输入框 ID： 确保搜索输入框的 id 与 JavaScript 代码中引用的 input-search 匹配。
• 事件绑定： 将 onInputChange() 函数正确绑定到搜索输入框的 oninput 或 onkeyup 事件上，例如：

  <input type="text" id="input-search" placeholder="在所有列中搜索..." oninput="onInputChange()">

  登录后复制
• 性能考量： 对于非常大的表格（例如成千上万行），每次输入都重新遍历整个表格可能会有性能瓶颈。可以考虑以下优化：
  • 防抖（Debounce）： 限制 onInputChange 函数的调用频率，例如在用户停止输入一段时间后才执行搜索。
  • 虚拟滚动： 对于巨型表格，只渲染可见区域的行。
  • 服务器端过滤： 如果数据量巨大，将过滤逻辑放在 Google Apps Script 后端或 Google Sheets 查询中执行。
• 用户体验： 可以在搜索框旁边添加一个清除按钮，或者在搜索结果为空时显示“无匹配项”的提示。

总结

通过引入内层循环遍历行的所有单元格，并使用一个标志位 foundMatch 来判断是否找到匹配项，我们成功地将表格过滤功能从单列扩展到了所有列。这种方法在 Google Apps Script 项目中实现动态、灵活的 HTML 表格搜索过滤非常有效，显著提升了用户查找数据的便利性。请根据您的具体项目需求调整 HTML 元素 ID 和事件绑定，确保代码能够正确运行。

以上就是HTML 表格多列搜索过滤实现指南 (Google Apps Script)的详细内容，更多请关注php中文网其它相关文章！