如何使用 jQuery 搜索表格

在 Web 开发中，搜索表格是一项非常常见的任务。在这篇文章中，我们将介绍如何使用 jQuery 来搜索 HTML 表格。

HTML 结构

假设我们有一个简单的 HTML 表格如下：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>邮件</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>johndoe@example.com</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>22</td>
      <td>janedoe@example.com</td>
    </tr>
    <tr>
      <td>Bob Smith</td>
      <td>35</td>
      <td>bob@example.com</td>
    </tr>
  </tbody>
</table>

JavaScript 代码

我们将在 HTML 中添加一个搜索框，来实现对上述表格的搜索功能。首先，需要在 HTML 中添加如下代码：

<input type="text" id="searchInput" placeholder="搜索...">

接下来，在 JavaScript 中定义一个函数，该函数将搜索输入的文本，并显示与搜索相匹配的结果。代码如下：

$(document).ready(function() {
  $("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("table tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

代码解释

此 JavaScript 代码的逻辑如下：

1. 等待 HTML 加载完成后，绑定一个 keyup 事件到搜索输入框(#searchInput)。
2. 获取搜索输入框(#searchInput)的值，转化为小写字母，并赋值到变量 value 中。
3. 使用 jQuery 的 filter() 函数来遍历所有 tr 元素，并将它们中的文本转化为小写字母，再查看是否包含 value 的值。
4. 使用 jQuery 的 toggle() 函数来显示或隐藏表格中的行，条件为行中的文本是否包含 value 的值。

Markdown 代码片段

# 如何使用 jQuery 搜索表格

在 Web 开发中，搜索表格是一项非常常见的任务。在这篇文章中，我们将介绍如何使用 jQuery 来搜索 HTML 表格。

## HTML 结构

假设我们有一个简单的 HTML 表格如下：

```html
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>邮件</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>johndoe@example.com</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>22</td>
      <td>janedoe@example.com</td>
    </tr>
    <tr>
      <td>Bob Smith</td>
      <td>35</td>
      <td>bob@example.com</td>
    </tr>
  </tbody>
</table>

JavaScript 代码

我们将在 HTML 中添加一个搜索框，来实现对上述表格的搜索功能。首先，需要在 HTML 中添加如下代码：

<input type="text" id="searchInput" placeholder="搜索...">

接下来，在 JavaScript 中定义一个函数，该函数将搜索输入的文本，并显示与搜索相匹配的结果。代码如下：

$(document).ready(function() {
  $("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("table tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

代码解释

此 JavaScript 代码的逻辑如下：

1. 等待 HTML 加载完成后，绑定一个 keyup 事件到搜索输入框(#searchInput)。
2. 获取搜索输入框(#searchInput)的值，转化为小写字母，并赋值到变量 value 中。
3. 使用 jQuery 的 filter() 函数来遍历所有 tr 元素，并将它们中的文本转化为小写字母，再查看是否包含 value 的值。
4. 使用 jQuery 的 toggle() 函数来显示或隐藏表格中的行，条件为行中的文本是否包含 value 的值。