jQuery實作搜尋表格
在網頁應用程式中，表格是常見的資料展示形式。當資料量很大時，通常需要新增搜尋功能來快速定位所需的資料。本文將介紹如何使用jQuery實作搜尋表格的功能。
首先，我們需要準備一些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程式碼。我們將使用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中文網其他相關文章！
