SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

テーブルのキーワードにマッチする行だけ表示する

Excelのオートフィルタのような感じで、一覧表示している情報の中から、指定したキーワードにマッチする行だけを表示します。

サーバーにはリクエストが発生せず、ブラウザ側の画面上での処理となります。通信が発生しない分、一瞬で絞込みがされます。このようなちょっとした処理は画面でできるとよいですね。

デモでは各行(TR)の1列目(1つ目のTD)の内容を使って絞込みをしています。必要なら全ての列を対象に絞込みをするようにもできます。

HTML

<input type="text" id="search"> <input type="button" value="絞り込む" id="button"> <input type="button" value="すべて表示" id="button2">

<table id="result">
	<thead>
		<tr><th>氏名</th><th>住所</th><th>備考</th></tr>
	</thead>
	<tbody>
		<tr><td>サンプル</td><td>データ1</td><td>情報1</td></tr>
		<tr><td>サンプリ</td><td>データ1</td><td>情報1</td></tr>
		<tr><td>サンプレ</td><td>データ1</td><td>情報1</td></tr>
		<tr><td>サンプロ</td><td>データ1</td><td>情報1</td></tr>
		<tr><td>サンプラ</td><td>データ1</td><td>情報1</td></tr>
		<tr><td>サンセット</td><td>データ1</td><td>情報1</td></tr>
		<tr><td>サンデー</td><td>データ1</td><td>情報1</td></tr>
		<tr><td>マンデー</td><td>データ1</td><td>情報1</td></tr>
		<tr><td>チューズデー</td><td>データ1</td><td>情報1</td></tr>
		<tr><td>太郎さん</td><td>データ1</td><td>情報1</td></tr>
		<tr><td>花子サン</td><td>データ1</td><td>情報1</td></tr>
	</tbody>
</table>

JavaScript

$(function(){
	$('#button').bind("click",function(){
		var re = new RegExp($('#search').val());
		$('#result tbody tr').each(function(){
			var txt = $(this).find("td:eq(0)").html();
			if(txt.match(re) != null){
				$(this).show();
			}else{
				$(this).hide();
			}
		});
	});

	$('#button2').bind("click",function(){
		$('#search').val('');
		$('#result tr').show();
	});
});

DEMO

氏名 住所 備考
サンプル データ1 情報1
サンプリ データ1 情報1
サンプレ データ1 情報1
サンプロ データ1 情報1
サンプラ データ1 情報1
サンセット データ1 情報1
サンデー データ1 情報1
マンデー データ1 情報1
チューズデー データ1 情報1
太郎さん データ1 情報1
花子サン データ1 情報1

関連するメモ

コメント(7)

ちゃっきー 2016年6月4日 08:53

大変参考になる記事ありがとうございます!
まさにこの機能を探していたのでとても助かりました^^

もし可能であれば、全ての列を対象に絞込みをできる方法があれば教えていただきたいです!
これからも記事アップ楽しみにしてます。

広告ぽち

ハラシマ 2017年6月26日 17:39

社内のイントラでリストの検索機能を盛り込むようにリクエストされていたのですが、
この機能は探していた機能にバッチリです。助かりました、ありがとうございます。
独学でhtmlを少しは理解できるようになったのですが、Javaとかは全くわからないので
こちらのサイトはすごく参考になります。

よろしければ、ちゃっきーさんと同じく全ての列を対象に絞込みできる方法をご教示頂けないでしょうか。
よろしくお願いします。

yoshimura 2017年6月29日 16:12

コメントありがとうございます。

別の記事に書きました!
https://www.softel.co.jp/blogs/tech/archives/5668

あいぽん 2017年11月8日 16:55

“すべて表示”を押した時に、キーワードを入れるテキストボックスの値をクリアするにはどうすれば良いですか?

yoshimura 2017年11月13日 11:38

下から4行目に
$(‘#search’).val(”);
を追記しました。

めい 2019年1月11日 16:10

すみません。1つのキーワードの検索は成功しました。
複数のキーワードの検索ができる仕組みはありますか?

yoshimura 2019年1月13日 15:14

半角スペース区切りで複数キーワードを入力してもらって、
JavaScript側では半角スペースで分割して、AND検索なりOR検索なりするようにするとよいと思います。