📌  相关文章
📜  表格 html 的简单搜索过滤器 - Javascript (1)

📅  最后修改于: 2023-12-03 14:57:20.073000             🧑  作者: Mango

表格 HTML 的简单搜索过滤器 - JavaScript

简介

在网页开发中，常常需要在表格中实现搜索过滤功能，以便用户可以快速找到所需的数据。这个简单搜索过滤器通过使用 JavaScript 和 HTML，提供了一种简洁而高效的方法来实现表格数据的搜索过滤。

代码示例

下面是一个示例代码片段，展示了如何在一个表格中实现搜索过滤器的功能。

<!DOCTYPE html>
<html>
<head>
  <title>简单搜索过滤器</title>
  <style>
    table {
      border-collapse: collapse;
    }
    
    th, td {
      border: 1px solid black;
      padding: 8px;
    }
  </style>
  <script>
    function filterTable() {
      // 获取输入框的值，转为小写以忽略大小写
      var input = document.getElementById("searchInput").value.toLowerCase();
      
      // 获取表格和表格行
      var table = document.getElementById("myTable");
      var rows = table.getElementsByTagName("tr");
      
      // 遍历表格行，隐藏不匹配的行
      for (var i = 0; i < rows.length; i++) {
        var rowData = rows[i].getElementsByTagName("td");
        var match = false;

        for (var j = 0; j < rowData.length; j++) {
          if (rowData[j].innerHTML.toLowerCase().indexOf(input) > -1) {
            match = true;
            break;
          }
        }

        // 根据匹配结果显示/隐藏行
        rows[i].style.display = match ? "" : "none";
      }
    }
  </script>
</head>
<body>
  <h2>表格搜索过滤器</h2>
  <input type="text" id="searchInput" onkeyup="filterTable()" placeholder="搜索...">
  <br><br>
  <table id="myTable">
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>35</td>
    </tr>
  </table>
</body>
</html>
代码解析

这段代码包含一个具有搜索过滤功能的简单表格。以下是代码的主要部分：

  • 一个包含搜索输入框和表格的 HTML 结构。
  • 一个 JavaScript 函数 filterTable()，该函数会在输入框的值变化时被触发。
  • 在 filterTable() 函数中，我们首先获取输入框的值，并将其转换为小写字母，以便忽略大小写。
  • 接下来，我们获取表格和表格行的引用。使用 getElementsByTagName() 方法可以获取表格行的集合。
  • 然后，我们遍历每一行，并获取每一行中的单元格。对于每个单元格，我们将其内容转换为小写字母，并使用 indexOf() 方法检查是否出现匹配的关键词。
  • 最后，根据匹配结果，我们设置行的 style.display 属性来显示或隐藏匹配的行。
使用说明

要使用这个简单的表格搜索过滤器，你可以按照以下步骤进行操作：

  1. 将上述示例代码保存为一个 HTML 文件。
  2. 在浏览器中打开该 HTML 文件。
  3. 在搜索输入框中输入关键词。
  4. 表格中将只显示匹配关键词的行。

你可以根据自己的需要修改示例代码中的表格数据和样式，以满足特定的要求。

希望这个简单的搜索过滤器能帮助你更轻松地在表格中进行数据搜索和过滤！