jQuery-フィルター
jQueryフィルター
jQueryを使用して、特定の要素をフィルタリング/検索します。
テーブルのフィルター
テーブル内のアイテムに対して大文字と小文字を区別しない検索を実行します。
例
入力フィールドに何かを入力して、名、姓、または電子メールでテーブルを検索します。
|
Firstname |
Lastname |
|
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@mail.com |
| July | Dooley | july@greatstuff.com |
| Anja | Ravendale | a_r@test.com |
jQuery
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
例の説明:jQueryを使用してテーブルの各行をループし、入力フィールドの値と一致するテキスト値があるかどうかを確認します。このtoggle()メソッドは、検索に一致しない行を非表示にします(display:none)。toLowerCase()DOMメソッドを使用してテキストを小文字に変換します。これにより、検索で大文字と小文字が区別されなくなります(検索では「john」、「John」、さらには「JOHN」も許可されます)。
フィルタリスト
リスト内のアイテムに対して大文字と小文字を区別しない検索を実行します。
何でもフィルタリング
div要素内のテキストに対して、大文字と小文字を区別しない検索を実行します。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。