在表中搜索 jQuery - JavaScript

在开发中，经常需要对一个表格进行搜索操作。本文将介绍如何使用 JavaScript 来对一个 HTML 表格进行搜索，并且以 jQuery 的方式实现。

需求

我们现在假设有一个 HTML 表格，其中有许多行数据，每一行数据都有三列：姓名、性别、年龄。我们的需求是，能够在这个表格中搜索指定的数据，并显示搜索结果。

实现

HTML

首先，我们需要准备一份 HTML，其中包含一个表格：

<table id="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>23</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>26</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>21</td>
    </tr>
  </tbody>
</table>

JavaScript

接下来，我们需要写一份 JavaScript，来实现搜索功能。我们将使用 jQuery 库来简化代码实现过程。

首先，我们先写一个搜索框，用于输入搜索关键字：

<input type="text" id="search" placeholder="输入搜索关键字">

然后，我们可以在输入框中实时响应搜索动作：

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

代码片段：

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

以上 JavaScript 代码中，我们绑定了一个 `.on()` 事件监听器，当用户输入关键词时，我们使用 `.toLowerCase()` 方法将其转换为小写，以便于匹配。

接着，我们使用了 jQuery 的 `.filter()` 方法，对每一行数据进行筛选。我们使用 `.text()` 方法获取每一行的文本内容，并且将它们全部转换成小写，以方便匹配。

如果匹配成功，则使用 `.toggle()` 方法显示这一行数据，否则则将其隐藏。

## 结论

以上就是本文的全部内容。通过以上 JavaScript 代码，我们可以在表格中搜索指定数据，并且将搜索结果以 jQuery 的方式实现。这对于开发者们开发复杂的 Web 应用程序来说，应该是非常有用的技巧。