SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

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

問題

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

答え

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

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

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

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

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

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

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

メモ

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();
	});
});

関連するメモ

コメント(13)

2018年7月7日 15:32

いい記事を発見してよかったです。

閲覧していて質問なのですが、[絞り込む]を押さなくても検索できる方法をご存知であればお教え願いたいです。

yoshimura 2018年7月20日 09:50

button の click イベントを拾っているところを、
input の keyup や input イベントに変えるとよいと思います。

匿名 2020年1月10日 03:03

その1に続いて、大変勉強になりました。
ありがとうございます。

K.T 2020年4月6日 14:03

すいません、教えてください。絞り込むをおすまではNo,の行だけを表示させる方法と、javascriptをHTML内に記述する方法を教えてください。

yoshimura 2020年4月8日 06:02

その場合
・「すべて表示」ボタンは不要。
・ifでmatchしたらshowしているところに「キーワードが空ではないこと」条件を追加する。
・初期状態はCSSか $(‘#button’).trigger(“click”) でも実行して各行を隠しておく。
とするとよいでしょうか。

javascriptをHTML内に記述するには <script>~</script> で囲むとよいと思います。

かんち 2020年10月14日 14:40

記事を参考にさせていただき、利用させていただきました。
ひとつ質問なのですが、大文字小文字の判別をさせず絞り込みさせる為にはどのように記述したら良いでしょうか?
アドバイス願います。
例)
javaでもJAVAでもJavaが絞り込みされる。

yoshimura 2020年10月14日 17:05

例えば、全部大文字に揃えたらよいと思います。

検索キーワードを大文字にする
var re = new RegExp($(‘#search’).val());

var re = new RegExp($(‘#search’).val().toUpperCase());

検索対象も大文字にする
var txt = $(this).html();

var txt = $(this).html().toUpperCase();

大文字同士なら jAvA で検索してもJaVa がヒットする。

感謝 2021年11月9日 13:30

利用させていただいています。大変助かっております。
すいません、ご教授頂きたいのですが、検索を完全一致で設定したいのですが、どのようにすれば良いでしょうか?

yoshimura 2021年11月13日 10:24

正規表現でmatchするところを、普通の文字列の比較で=(等しいかどうか)にしたらよいです

いの 2022年4月20日 15:49

こちらの記事を参考にon inputで絞り込みが実現できて感謝しております。一点動作がうまく行かないことがあるので、もしおわかりになれば教えていただけますでしょうか。

【やりたいこと】キーワードに「+」を含めて検索したときもmatchさせたい
【現状】例えばテーブルに「日本語+100点」というデータがあって、キーワード「日本語」まで入力したときならmatchするが、「日本語+100」を入力したときmatchしない。「+100」やデータ上にない「+999999」を入力すると絞り込みすらされない

「+」が演算子として認識されてしまっているような気がするのですが対策がわかりません。ちなみに「日本語-100点」のように「-」だときちんと動作します。
恐れ入りますが、ご教示いただけますと幸いです。

yoshimura 2022年4月22日 06:15

当時何を考えて正規表現を使ったのか覚えてないのですが、
シンプルに文字列を含むかどうかでよかったら
入力値をそのまま受け取って、
var re = $(‘#search’).val()
文字列を含むかどうかで判定でよいと思います。
if(txt.indexOf(re) != -1){

am 2023年1月11日 11:48

こちら大変助かりました、ありがとうございました!

bel 2023年8月2日 20:45

検索対象行が200行近くあり、ただHTMLを書いてページ内リンクで飛ばすだけでは使い勝手がとても悪かったため、本ページの内容を参考に、数ヶ月掛けて以下の変更を行ったページを作成しました。
「検索対象行を一旦全て非表示にしてからヒットした行のみ表示する」という概念を提供して頂き、有難うございました。
200行近い表示切替となりましたが、スマホ端末における表示リセット(全件再表示)動作を除けば、パフォーマンス的にも十分満足出来るレベルでした。

・jQueryを使用せず、全てバニラJavascriptのみで機能を実現する
・Internet Explorerでの使用を考慮しない
・検索対象列を予め「Array.from」で取得し検索の度に再取得しない
・検索対象にしない(表示切替をさせず常時表示させたい)行をクラス指定し、指定したクラスの行は検索対象の配列から除外する
・LowerCase等を使用せず、RegExpの「i」修飾子で英字の大文字小文字を区別しない
・半角全角スペースを自動でパイプ(|)に置き換えることで、特別なコードを追加することなくOR検索に対応
・全角英数字を文字コードで65248だけ引くことで自動で半角英数字に変換
・キーワード検索だけでなく、セレクトボックスからの選択にも対応
・複数条件に対応させるため「&&」で複数のmatch条件を結合
・キーワード検索に未入力の場合、バリデーションをスキップし速度向上
・キーワード検索では、検索ボタンを押したときとEnterキーを押した時に実行、セレクトボックス選択では、変更したタイミングで実行するように実行条件設定
・これらのJavascriptコードを全てHTMLファイルに直書きし、リクエスト数を低減