jquery实现搜索表格

百变鹏仔 3个月前 (10-31) #前端问答

文章标签表格

jquery实现搜索表格

在网页应用程序中，表格是常见的数据展示形式。当数据量很大时，通常需要添加搜索功能来快速定位所需的数据。本文将介绍如何使用jquery实现搜索表格的功能。

HTML代码

首先，我们需要准备一些HTML代码，包括一个表格和一个输入框。我们的表格包含姓名、年龄、性别和国籍等信息。

<table id="myTable">  <thead>    <tr>      <th>姓名</th>      <th>年龄</th>      <th>性别</th>      <th>国籍</th>    </tr>  </thead>  <tbody>    <tr>      <td>张三</td>      <td>25</td>      <td>男</td>      <td>中国</td>    </tr>    <tr>      <td>李四</td>      <td>30</td>      <td>女</td>      <td>中国</td>    </tr>    <tr>      <td>John Doe</td>      <td>40</td>      <td>男</td>      <td>美国</td>    </tr>    <tr>      <td>Jane Doe</td>      <td>35</td>      <td>女</td>      <td>美国</td>    </tr>  </tbody></table><input type="text" id="myInput" placeholder="搜索">

JavaScript代码

接下来，我们需要编写一些JavaScript代码。我们将使用jQuery库来简化代码编写过程。首先，我们需要获取输入框和表格元素。

var input = $("#myInput");var table = $("#myTable");

然后，我们需要添加一个事件监听器，以便在输入框中输入时触发搜索功能。

input.on("keyup", function() {  var value = $(this).val().toLowerCase(); // 获取输入框的值，并将其转换为小写字母  table.find("tr").not(":first").filter(function() { // 找到表格中所有行（除第一行标题外）并过滤出与输入框中内容不匹配的行    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) // toggle方法根据匹配结果显示或隐藏行  });});

在这段代码中，我们使用了jQuery的方法on()来添加事件监听器。当输入框触发keyup事件时，代码将获取输入框的值并将其转换为小写字母。然后，我们使用jQuery的方法find()和filter()来搜索匹配的内容，并使用toggle()方法显示或隐藏行。在这个例子中，我们使用了indexOf()方法来检查文本是否包含搜索词。

完整代码

下面是完整的HTML和JavaScript代码：

<!DOCTYPE html><html><head>  <title>jquery实现搜索表格</title>  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body>  <input type="text" id="myInput" placeholder="搜索">  <table id="myTable">    <thead>      <tr>        <th>姓名</th>        <th>年龄</th>        <th>性别</th>        <th>国籍</th>      </tr>    </thead>    <tbody>      <tr>        <td>张三</td>        <td>25</td>        <td>男</td>        <td>中国</td>      </tr>      <tr>        <td>李四</td>        <td>30</td>        <td>女</td>        <td>中国</td>      </tr>      <tr>        <td>John Doe</td>        <td>40</td>        <td>男</td>        <td>美国</td>      </tr>      <tr>        <td>Jane Doe</td>        <td>35</td>        <td>女</td>        <td>美国</td>      </tr>    </tbody>  </table>  <script>    var input = $("#myInput");    var table = $("#myTable");    input.on("keyup", function() {      var value = $(this).val().toLowerCase();      table.find("tr").not(":first").filter(function() {        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)      });    });  </script></body></html>

总结

使用jquery实现搜索表格的功能比较简单，只需要编写少量的代码即可实现。通过使用jQuery的方法find()、filter()和toggle()，我们可以轻松地搜索匹配的内容并显示或隐藏行。

文章推荐

jquery实现搜索表格

javascript里怎么输入

网页关闭javascript

javascript怎么实现异步

javascript隐藏的元素显示属性

javascript要全部记住吗