ホームページ > 記事 > ウェブフロントエンド > jqueryは検索フォームを実装します
jqueryは検索フォームを実装します
- PHPzオリジナル
- 2023-05-24 22:23:06652ブラウズ
jQuery は検索フォームを実装します
Web アプリケーションでは、テーブルはデータ表示の一般的な形式です。データの量が多い場合、必要なデータをすばやく見つけるために検索機能を追加することが必要になる場合があります。この記事では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 中国語 Web サイトの他の関連記事を参照してください。