検索で絞り込み(jQuery使用)

kishidaです。
今回は検索して絞り込みをできるようにします。

javascript

$(function(){
 $('#search').on('keyup', function(){  //#searchに入力されるたびに反映
  var pattern = $(this).val();  //検索文字列を取得
  $("[class=tr]").each(function() {
   var str = $(this).children("td").text();  //検索対象を取得
      //検索に引っかかった場合表示
   if(str.match(pattern))  $(this).show();
      //検索対象以外隠す
      else $(this).hide();
  });
 });
});

html


A
B
C
D

これで検索して絞り込めるようになりました。なおcssでevenやoddを使用していた場合は検索前と検索後でそれぞれ設定する必要があるので注意です。

カテゴリー: html, javascript

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*