俺の雑記帳

My random memorandumです。(つまり、個人的な備忘録であり、その点ご容赦を。)

ユーザ入力で表(Table)を絞込むJavaScriptサンプル

仕事のWebサイトの絞込み機能を、サーバーサイドじゃなくて、クライアントサイドで実装すべきと考えた。その際にサンプルを探してみた。

(「表の絞り込み JavaScript」でググった。)

『A Pen by yambe jp』
https://codepen.io/yambejp/pen/oprwQJ
…Web上のサービス,CodePenで書かれたサンプル。

『リストを絞り込む処理を実装してみる cly7796.net』
http://cly7796.net/wp/javascript/implement-the-process-of-narrowing-down-the-list/

JavaScript - javascript で table の行を絞り込み表示|teratail』
https://teratail.com/questions/110567

『[jQuery] セレクトボックスで選択した値で表を絞り込む方法(プラグイン不使用、動作デモ、サンプルコード有) onocom』
http://onocom.net/blog/jquery-table-search-simple/
…これがやりたいことに一番近かったのかな?(検索した当時から時間が経ち過ぎ、覚えてない…)

『テーブルのキーワードにマッチする行だけ表示する at softelメモ』
https://www.softel.co.jp/blogs/tech/archives/4330
…これは、フリーキーワード入力のみの絞込み。複数列にも対応できるとあるが、サンプルは一つの列のみを検索対象とした絞込みのようだ。

JavaScriptによるライブラリ不要の絞込み機能付きテーブルソート - あずまや』
http://azuma006.hatenablog.com/entry/2013/08/26/232209
FireFox上、最後に置いてあったタブなので、これが最も良かったのか?
 冒頭に、「前回の続き」とあるように、「前回」のリンクではもう少し簡易なもの。
 「今回」は、JSONデータを外部URLから取得したりしている(古いワードで言うと、これがAjax?)。(現在、この外部データが取得できなくなっているようだ。)