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

Tweet

Category JavaScript / Tagged jQuery 2011/11/27

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>データ１</td><td>情報１</td></tr>
		<tr><td>サンプリ</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>サンプレ</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>サンプロ</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>サンプラ</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>サンセット</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>サンデー</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>マンデー</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>チューズデー</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>太郎さん</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>花子サン</td><td>データ１</td><td>情報１</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