html 表格按所有列过滤 - Html (1)

📌 相关文章

📜 html 表格按所有列过滤 - Html (1)

📅 最后修改于: 2023-12-03 15:01:17.631000 🧑 作者: Mango

HTML 表格按所有列过滤 - HTML

在 HTML 中，表格是一种常见的元素，可以用于展示和组织数据。当表格中的数据很多时，通常需要提供一些过滤和搜索功能，以帮助用户浏览和查找数据。本文将介绍如何实现一个 HTML 表格按所有列过滤的功能。

实现思路

实现 HTML 表格按所有列过滤的功能，我们需要以下步骤：

创建 HTML 表格元素；
添加一个文本框或下拉框，用于输入或选择过滤条件；
为文本框或下拉框添加事件监听器，以响应用户输入或选择的过滤条件；
遍历表格中的每一行，将其中所有列的值与过滤条件进行比较；
如果表格行中任意一列的值与过滤条件匹配，则保留该行，否则将该行从表格中删除。

实现代码

下面是一个实现 HTML 表格按所有列过滤的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>HTML Table Filter - All Columns</title>
  <script>
    window.onload = function() {
      var table = document.getElementById('table');
      var input = document.getElementById('input');
      input.addEventListener('input', function() {
        var filter = input.value.toUpperCase();
        var rows = table.getElementsByTagName('tr');
        for (var i = 0; i < rows.length; i++) {
          var row = rows[i];
          var cells = row.getElementsByTagName('td');
          var match = false;
          for (var j = 0; j < cells.length; j++) {
            var cell = cells[j];
            if (cell.innerText.toUpperCase().indexOf(filter) > -1) {
              match = true;
              break;
            }
          }
          row.style.display = (match) ? '' : 'none';
        }
      });
    }
  </script>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <input type="text" id="input" placeholder="Filter...">
  <table id="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>25</td>
        <td>Female</td>
      </tr>
      <tr>
        <td>Bob Johnson</td>
        <td>40</td>
        <td>Male</td>
      </tr>
      <tr>
        <td>Alice Williams</td>
        <td>35</td>
        <td>Female</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

该代码实现了一个简单的 HTML 表格按所有列过滤的功能。用户可以在文本框中输入过滤条件，该程序会自动遍历表格中的所有行和列，保留与过滤条件匹配的行，移除未匹配的行。

结论

本文介绍了如何实现 HTML 表格按所有列过滤的功能。通过添加一个文本框或下拉框，我们可以将表格中的数据按任意列进行过滤和搜索，从而帮助用户更轻松地查找和浏览数据。