テーブルのキーワードにマッチする行だけ表示する(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(); }); });
いい記事を発見してよかったです。
閲覧していて質問なのですが、[絞り込む]を押さなくても検索できる方法をご存知であればお教え願いたいです。
button の click イベントを拾っているところを、
input の keyup や input イベントに変えるとよいと思います。
その1に続いて、大変勉強になりました。
ありがとうございます。
すいません、教えてください。絞り込むをおすまではNo,の行だけを表示させる方法と、javascriptをHTML内に記述する方法を教えてください。
その場合
・「すべて表示」ボタンは不要。
・ifでmatchしたらshowしているところに「キーワードが空ではないこと」条件を追加する。
・初期状態はCSSか $(‘#button’).trigger(“click”) でも実行して各行を隠しておく。
とするとよいでしょうか。
javascriptをHTML内に記述するには <script>~</script> で囲むとよいと思います。
記事を参考にさせていただき、利用させていただきました。
ひとつ質問なのですが、大文字小文字の判別をさせず絞り込みさせる為にはどのように記述したら良いでしょうか?
アドバイス願います。
例)
javaでもJAVAでもJavaが絞り込みされる。
例えば、全部大文字に揃えたらよいと思います。
検索キーワードを大文字にする
var re = new RegExp($(‘#search’).val());
↓
var re = new RegExp($(‘#search’).val().toUpperCase());
検索対象も大文字にする
var txt = $(this).html();
↓
var txt = $(this).html().toUpperCase();
大文字同士なら jAvA で検索してもJaVa がヒットする。