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

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

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

HTML结构准备

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

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索姓名或国家...">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">姓名</th>
    <th style="width:40%;">国家</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>德国</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>瑞典</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>英国</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>德国</td>
  </tr>
</table>

在这个结构中：

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

JavaScript多列搜索逻辑实现

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

纳米搜索

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

30

查看详情

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

<script>
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>元素
    td = tr[i].getElementsByTagName("td")[0]; // 第一列 (姓名)
    td1 = tr[i].getElementsByTagName("td")[1]; // 第二列 (国家)

    // 确保当前行至少有第一个<td>元素
    if (td) {
      // 获取第一个<td>的文本内容
      txtValue = td.textContent || td.innerText;
      // 获取第二个<td>的文本内容
      // 注意：如果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"; // 隐藏不匹配的行
      }
    }
  }
}
</script>

代码解析

1. 变量声明: input, filter, table, tr, td, td1, i, txtValue, txtValue1 等变量用于存储DOM元素、搜索关键词、循环索引和单元格文本。
2. 获取搜索关键词:
   • input = document.getElementById("myInput"); 获取输入框元素。
   • filter = input.value.toUpperCase(); 获取用户输入的文本，并将其转换为大写，以便进行不区分大小写的匹配。
3. 获取表格行:
   • table = document.getElementById("myTable"); 获取表格元素。
   • tr = table.getElementsByTagName("tr"); 获取表格中所有的<tr>元素（包括表头）。
4. 遍历表格行:
   • for (i = 0; i < tr.length; i++): 循环遍历每一行。
   • 重要提示: 如果您的表头行有特定的类名（如class="header"），并且不希望它被过滤，您可以将循环起始索引设置为 i = 1 来跳过它。
5. 获取单元格内容:
   • td = tr[i].getElementsByTagName("td")[0]; 获取当前行的第一个<td>元素。
   • td1 = tr[i].getElementsByTagName("td")[1]; 获取当前行的第二个<td>元素。
6. 文本提取与条件判断:
   • if (td): 确保当前行存在至少一个<td>元素，防止因空行或格式错误导致脚本中断。
   • txtValue = td.textContent || td.innerText;: 提取<td>元素的文本内容。textContent是标准属性，innerText是旧版IE兼容属性。
   • txtValue1 = td1 ? (td1.textContent || td1.innerText) : "";: 同样提取第二个<td>的文本。这里添加了一个三元运算符 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的访问进行了改进，确保了即使某些行没有足够的列，脚本也能正常运行。对于更复杂的表格，您可能需要更通用的方法来获取所有相关列的文本，例如遍历所有<td>元素。
• 性能: 对于包含数千甚至数万行的大型表格，每次按键都遍历所有行可能会导致性能问题。在这种情况下，可以考虑以下优化：
  • 去抖动 (Debouncing)：在用户停止输入一段时间后才执行搜索，而不是每次按键都执行。
  • 虚拟滚动 (Virtual Scrolling)：只渲染可见区域的行。
  • 服务器端搜索: 将搜索任务交给服务器处理，尤其是当数据量巨大时。
• 多列动态选择: 如果您希望用户可以动态选择要搜索的列，可以添加复选框或下拉菜单，然后根据用户的选择动态构建搜索条件。
• 正则表达式搜索: 对于更复杂的搜索模式，可以使用JavaScript的正则表达式（RegExp）代替indexOf。

总结

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

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