首頁 > 文章 > web前端 > jquery實作搜尋表格

jquery實作搜尋表格

PHPz原創: 2023-05-24 22:23:06611瀏覽

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實作搜尋表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery html Filter 事件

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery實作div浮動下一篇：jquery實作div浮動

看更多