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

Tweet

Category JavaScript 2017/06/28

問題

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

答え

その１ では、ある特定の列のみ対象にしました。

今回は行内の全カラム対象にしてみます。

結果は同じでも、実装方法は考え方によりいろいろだと思います。

以下の作戦で作ってみます。

素直に テーブル→ 行 → セル の順で考えて、
指定されたテーブルの中の
各行の中の
各セルで、テキストにキーワードを含んでいたら、セルを含む行を表示、含まなかったら、行を隠す。

HTML

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

<table id="result">
	<thead>
		<tr><th>No.</th><th>言語名称</th><th>備考</th></tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>php</td><td>PHP (PHP: Hypertext Preprocessor を再帰的に略したものです) は、広く使われているオープンソースの汎用スクリプト言語です。 PHP は、特に Web 開発に適しており、HTML に埋め込むことができます。 </td></tr>
		<tr><td>2</td><td>C</td><td>C言語（シーげんご）は、1972年にAT&Tベル研究所のデニス・リッチーが主体となって開発したプログラミング言語である。英語圏では単に C と呼んでおり、日本でも文書や文脈によっては同様に C と呼ぶことがある。</td></tr>
		<tr><td>3</td><td>C++</td><td>汎用プログラミング言語の一つである。日本では略してシープラプラ、シープラなどとも呼ばれる。</td></tr>
		<tr><td>4</td><td>Java</td><td>Javaは組み込みシステムや携帯機器（携帯電話・PHSやPDA・スマートフォン等）のシステムから、企業の情報システムを担う大規模なデータベース、サーバ、スーパーコンピュータまで、多くの分野で使用されている。</td></tr>
		<tr><td>5</td><td>Python</td><td>コードがシンプルで扱いやすく設計されており、C言語などに比べて、さまざまなプログラムを分かりやすく、少ないコード行数で書けるといった特徴がある。</td></tr>
		<tr><td>6</td><td>C#</td><td>マイクロソフトが開発したマルチパラダイムプログラミング言語。 強い型付け、命令型、宣言型、手続き型、関数型、ジェネリック、オブジェクト指向の要素を持つ。</td></tr>
		<tr><td>7</td><td>Objective-C</td><td>C言語をベースにSmalltalk型のオブジェクト指向機能を持たせた上位互換言語である。</td></tr>
		<tr><td>8</td><td>Perl</td><td>ラリー・ウォールによって開発されたプログラミング言語である。</td></tr>
		<tr><td>9</td><td>Ruby</td><td>日本で開発されたプログラミング言語としては初めて国際電気標準会議で国際規格に認証された事例となった。</td></tr>
		<tr><td>10</td><td>JavaScript</td><td>このスクリプト言語はEcmaインターナショナルでECMAScript (ECMA-262) として標準化されており、多くのウェブブラウザ等はこの標準化されたECMAScriptを実装している。</td></tr>
	</tbody>
</table>

JavaScript

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

DEMO

メモ

JavaScriptの部分は考え方次第で他の書き方も考えられる。

上の例は、いったん行を非表示にして、マッチするセルがあれば行を表示するという考え。

行の中のセルを順に調べて、1件でもマッチするセルを見つけたらそこで調査は中断できて、調査の結果に応じて行の表示/非表示の処理する考えだと、下の書き方でもよい。

$(function(){
	$('#button').on("click",function(){
		var re = new RegExp($('#search').val());
		$('#result tbody tr').each(function(){
			var flag = false;
			$('td', this).each(function(){
				var txt = $(this).html();
				if(txt.match(re) != null){
					flag = true;
					return false;
				}
			});
			flag ? $(this).show() : $(this).hide();
		});
	});
	$('#button2').on("click",function(){
		$('#result tr').show();
	});
});

若干動作が変わってよければ、trの中のtd単位で調査しなくても、trのtextで判断することもできる。

$(function(){
	$('#button').on("click",function(){
		var re = new RegExp($('#search').val());
		$('#result tbody tr').each(function(){
			if($(this).text().match(re) != null){
				$(this).show();
			} else {
				$(this).hide();
			}
		});
	});
	$('#button2').on("click",function(){
		$('#result tr').show();
	});
});