如何对 HTML 表格执行实时搜索和过滤？

在前端开发过程中，我们时常需要对表格进行搜索和过滤操作，以提高用户的使用体验。本文介绍如何利用 JavaScript 实现对 HTML 表格的实时搜索和过滤功能。

1. HTML 表格结构

在实现搜索和过滤功能之前，我们需要确定 HTML 表格的结构。以下是一个简单的表格结构示例：

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tom</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jerry</td>
      <td>30</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mike</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

在上述结构中，我们依次定义了表头和表身部分，并在其中添加了若干个单元格和数据行。

2. 搜索和过滤实现

在 HTML 表格结构确定之后，我们可以开始实现搜索和过滤操作。代码片段如下：

<input type="text" id="myInput" onkeyup="filterTable()" placeholder="Search...">

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>1</td>
      <td>Tom</td>
      <td>25</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jerry</td>
      <td>30</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Mike</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

<script>
function filterTable() {
  // 获取输入框的值
  var input = document.getElementById("myInput");
  var filter = input.value.toUpperCase();
  // 获取表格
  var table = document.getElementById("myTable");
  var tr = table.getElementsByTagName("tr");
  // 循环每一行，匹配关键字并显示隐藏行
  for (var i = 0; i < tr.length; i++) {
    var td = tr[i].getElementsByTagName("td");
    var flag = false;
    for (var j = 0; j < td.length; j++) {
      var txtValue = td[j].textContent || td[j].innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        flag = true;
        break;
      }
    }
    if (flag) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }
  }
}
</script>

在上述代码中，我们首先在表格上面添加了一个搜索框，该搜索框的输入事件绑定了 filterTable() 函数，以实现实时搜索和过滤。在 filterTable() 函数内部，我们逐个取出表格中的行和单元格，判断其是否符合搜索条件，而后显示或隐藏该行数据。

3. 总结

通过以上步骤，我们已经实现了对 HTML 表格的实时搜索和过滤功能。读者可以根据实际需求调整代码细节，在表格中添加更多自定义功能，以应用在实际项目中。