質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
フィルタ

フィルタとは、特定の条件に合わせてデータへのアクセスをブロックするプログラムやルーチンを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2954閲覧

HTMLにフィルタ機能を実装する

miya_miyamo

総合スコア13

フィルタ

フィルタとは、特定の条件に合わせてデータへのアクセスをブロックするプログラムやルーチンを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/12/06 16:22

編集2018/12/07 02:38

前提・実現したいこと

HTMLでテーブルを作成する際、列ごとにキーワードを設定し、
チェックボックスを利用して条件に合う列だけを抽出したいと考えています。
例えば

名前種類
みかんオレンジ果物
りんご果物
にんじんオレンジ野菜

というような表があったとき、
「オレンジ」でフィルタをかければ「みかん」と「にんじん」が、
「果物」でフィルタをかければ「みかん」と「りんご」が、
「果物」と「オレンジ」でフィルタをかければ「みかん」のみが表示されるようにしたいです。
よろしくお願いします。

発生している問題

複数のキーワードを指定した際、そのキーワードを含むものすべてが表示されてしまう。
上記の例でいうと「果物」と「オレンジ」でフィルタをかけた場合、
「果物」を含む「みかん」と「りんご」が
「オレンジ」を含む「みかん」と「にんじん」がすべて該当してしまうため
結果3つすべてが表示されてしまう。

該当のソースコード(省略してあります)

html

1<input type="checkbox" onChange="goFilter()" id="chkFruit"> 2<input type="checkbox" onChange="goFilter()" id="chkOrange"> 3<table id="cardList"> 4 <tr class="colTitle"> 5 <th>名前</th> 6 <th></th> 7 <th>種類</th> 8 <tr class="orange fruit"> 9 <td>みかん</td> 10 <td>オレンジ</td> 11 <td>果物</td> 12 </tr> 13 <tr class="red fruit"> 14 <td>りんご</td> 15 <td></td> 16 <td>果物</td> 17 </tr> 18 <tr class="orange vegetable"> 19 <td>にんじん</td> 20 <td>オレンジ</td> 21 <td>野菜</td> 22 </tr> 23</table>

css

1 .allNoDisplay tr:not(.colTitle) { 2 display: none; 3 } 4 .orange tr[orange] { 5 display: table-row; 6 } 7 .fruit tr[fruit] { 8 display: table-row; 9 }

javascript

1function goFilter(){ 2 var wTable = document.getElementById("cardList"); 3 var value = ''; 4 if(document.getElementById("chkFruit").checked) { 5 value += ' fruit'; 6 } 7 if(document.getElementById("chkOrange").checked) { 8 value += ' orange'; 9 } 10 if(value == ''){ 11 wTable.className = ''; 12 } else{ 13 wTable.className = ' allNoDisplay' + value; 14 } 15}

###最後に
長文になりましたがよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

こんな感じじゃないでしょうかね

  • 同じカテゴリ内はor検索
  • 別のカテゴリとの間はand検索

javascript

1<style> 2.hide{display:none;} 3</style> 4<script> 5window.addEventListener('DOMContentLoaded', function(e){ 6 var c=["color","kind"]; 7 [].forEach.call(document.querySelectorAll(c.map(function(x){ 8 return "."+x; 9 }).join(",")),function(x){ 10 x.addEventListener('change',function(e){ 11 var search={}; 12 c.forEach(function(x){ 13 search[x]=[].map.call(document.querySelectorAll('[type=checkbox].'+x+':checked'),function(x){ 14 return x.value; 15 }); 16 }); 17 var len={}; 18 var reg={}; 19 Object.keys(search).forEach(function(x){ 20 len[x]=search[x].length; 21 reg[x]=new RegExp(search[x].join("|")); 22 }); 23 [].forEach.call(document.querySelectorAll('#t1 tbody tr'),function(x){ 24 var flg=c.map(function(y){ 25 if(len[y]==0) return true; 26 return x.querySelector('td.'+y).textContent.match(reg[y])?true:false; 27 }).filter(function(y){ 28 return !y; 29 }).length>0; 30 flg?x.classList.add("hide"):x.classList.remove("hide"); 31 }); 32 }); 33 }); 34}); 35</script> 36<div>色: 37<label><input type="checkbox" value="オレンジ" class="color">オレンジ</label> 38<label><input type="checkbox" value="赤" class="color"></label> 39</div> 40<div>種類: 41<label><input type="checkbox" value="果物" class="kind">果物</label> 42<label><input type="checkbox" value="野菜" class="kind">野菜</label> 43</div> 44<table id="t1"> 45<thead> 46<tr> 47<th>名前</th> 48<th></th> 49<th>種類</th> 50</tr> 51</thead> 52<tbody> 53<tr> 54<td>みかん</td> 55<td class="color">オレンジ</td> 56<td class="kind">果物</td> 57</tr> 58<tr> 59<td>りんご</td> 60<td class="color"></td> 61<td class="kind">果物</td> 62</tr> 63<tr> 64<td>にんじん</td> 65<td class="color">オレンジ</td> 66<td class="kind">野菜</td> 67</tr> 68</tbody> 69</table>

3つ以上拡張

部分一致なので、複数季節をかいてもヒットする

javascript<style>

1.hide{display:none;} 2</style> 3<script> 4window.addEventListener('DOMContentLoaded', function(e){ 5 var c=["color","kind","season"]; /* ここにクラスを追加する */ 6 [].forEach.call(document.querySelectorAll(c.map(function(x){ 7 return "."+x; 8 }).join(",")),function(x){ 9 x.addEventListener('change',function(e){ 10 var search={}; 11 c.forEach(function(x){ 12 search[x]=[].map.call(document.querySelectorAll('[type=checkbox].'+x+':checked'),function(x){ 13 return x.value; 14 }); 15 }); 16 var len={}; 17 var reg={}; 18 Object.keys(search).forEach(function(x){ 19 len[x]=search[x].length; 20 reg[x]=new RegExp(search[x].join("|")); 21 }); 22 [].forEach.call(document.querySelectorAll('#t1 tbody tr'),function(x){ 23 var flg=c.map(function(y){ 24 if(len[y]==0) return true; 25 return x.querySelector('td.'+y).textContent.match(reg[y])?true:false; 26 }).filter(function(y){ 27 return !y; 28 }).length>0; 29 flg?x.classList.add("hide"):x.classList.remove("hide"); 30 }); 31 }); 32 }); 33}); 34</script> 35<div>色: 36<label><input type="checkbox" value="オレンジ" class="color">オレンジ</label> 37<label><input type="checkbox" value="赤" class="color"></label> 38</div> 39<div>種類: 40<label><input type="checkbox" value="果物" class="kind">果物</label> 41<label><input type="checkbox" value="野菜" class="kind">野菜</label> 42</div> 43<div>旬: 44<label><input type="checkbox" value="春" class="season"></label> 45<label><input type="checkbox" value="夏" class="season"></label> 46<label><input type="checkbox" value="秋" class="season"></label> 47<label><input type="checkbox" value="冬" class="season"></label> 48</div> 49<table id="t1"> 50<thead> 51<tr> 52<th>名前</th> 53<th></th> 54<th>種類</th> 55</tr> 56</thead> 57<tbody> 58<tr> 59<td>みかん</td> 60<td class="color">オレンジ</td> 61<td class="kind">果物</td> 62<td class="season"></td> 63</tr> 64<tr> 65<td>りんご</td> 66<td class="color"></td> 67<td class="kind">果物</td> 68<td class="season">秋・冬</td> 69</tr> 70<tr> 71<td>にんじん</td> 72<td class="color">オレンジ</td> 73<td class="kind">野菜</td> 74<td class="season">冬・春</td> 75</tr> 76</tbody> 77</table>

特定の列を表示しない

ちょうどhideクラスを作ってあるので、それをthやtdに指定してやる
場合によってはnth-childなどで指定してもいいが構造が変わるとずれるので微妙

HTML

1<table id="t1"> 2<thead> 3<tr> 4<th>名前</th> 5<th>色</th> 6<th>種類</th> 7<th class="hide">旬</th> 8</tr> 9</thead> 10<tbody> 11<tr> 12<td>みかん</td> 13<td class="color">オレンジ</td> 14<td class="kind">果物</td> 15<td class="season hide">冬</td> 16</tr> 17<tr> 18<td>りんご</td> 19<td class="color">赤</td> 20<td class="kind">果物</td> 21<td class="season hide">秋・冬</td> 22</tr> 23<tr> 24<td>にんじん</td> 25<td class="color">オレンジ</td> 26<td class="kind">野菜</td> 27<td class="season hide">冬・春</td> 28</tr> 29</tbody> 30</table>

投稿2018/12/07 03:10

編集2018/12/07 05:05
yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miya_miyamo

2018/12/07 04:06

ご回答ありがとうございます。 まさにこのような機能を求めていたのでとても助かります。 3つ以上のカテゴリの場合でも、同じような記述でできるのでしょうか?
yambejp

2018/12/07 04:08

ちなみに、カテゴリの中身は「部分一致」となっています 完全一致を希望する場合は調整が必要です。 例えば、「黄」を選んでも「黄緑」までヒットしてしまうということ
yambejp

2018/12/07 04:15 編集

> 3つ以上のカテゴリの場合 クラスをつかってうまく拡張すれば3つ以上いくつでもいけるはずです 一応ソース追記してあるので参考にして下さい
miya_miyamo

2018/12/07 04:55

詳しく説明していただきありがとうございます。 申し分けないのですが、加えてもう一つ質問させていただきます。 このコードですと、セルの内容の一致でフィルターをかけていると思うのですが、表としては見えないキーワードを用いることは可能でしょうか? 例えば先ほどの「旬」の列を表示せずに同じようなフィルターにかけることはできるのでしょうか。
yambejp

2018/12/07 05:07

単純に表のいち部を消しました 別途trにカスタムデータを指定してやるという考え方もあると思います
miya_miyamo

2018/12/07 05:12

そのようなやり方があるのですね。 何度もご丁寧にありがとうございました。
guest

0

できるだけ元の思想を残してみた

HTML

1<input type="checkbox" onChange="goFilter()" id="chkFruit"> 2<input type="checkbox" onChange="goFilter()" id="chkOrange"> 3<table id="cardList"> 4 <tr class="colTitle"> 5 <th>名前</th> 6 <th>色</th> 7 <th>種類</th> 8 <tr data-color="orange" data-type="fruit"> 9 <td>みかん</td> 10 <td>オレンジ</td> 11 <td>果物</td> 12 </tr> 13 <tr data-color="red" data-type="fruit"> 14 <td>りんご</td> 15 <td>赤</td> 16 <td>果物</td> 17 </tr> 18 <tr data-color="orange" data-type="vegetable"> 19 <td>にんじん</td> 20 <td>オレンジ</td> 21 <td>野菜</td> 22 </tr> 23</table>

CSS

1 .allNoDisplay .colTitle { 2 display: table-row; 3 } 4 .allNoDisplay tr { 5 display: none; 6 } 7 .f-orange [data-color="orange"] { 8 display: table-row; 9 } 10 .f-fruit [data-type="fruit"] { 11 display: table-row; 12 }

js

1function goFilter(){ 2 var wTable = document.getElementById("cardList"); 3 var value = ''; 4 if(document.getElementById("chkFruit").checked) { 5 value += ' f-fruit'; 6 } 7 if(document.getElementById("chkOrange").checked) { 8 value += ' f-orange'; 9 } 10 if(value == ''){ 11 wTable.className = ''; 12 } else{ 13 wTable.className = ' allNoDisplay' + value; 14 } 15}

投稿2018/12/07 01:54

macaron_xxx

総合スコア3191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

IDとCLASSの指定が明確にできていませんから。まず<table>タグと<tr>タグのIDとCLASSを指定しなければなりません。
そして、指定した<tr>以外は非表示にするCSSをJavaScriptで<input>の指定に合わせて後で働かせます。

html

1<table id="cardList"> 2 3<tr class="orange fruit"> 4 5<tr class="red fruit"> 6 7<tr class="orange vegetable">

等と指定し、JavaScriptでのCSS操作を調べましょう。

投稿2018/12/06 19:54

seastar3

総合スコア2285

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miya_miyamo

2018/12/07 02:32

ご回答ありがとうございます。 こちらの記述ミスがあり、テーブルのidの不一致、trのクラスの指定ができておりませんでした。 しかし、これで動かしたとしても2つのチェックボックスにチェックを入れるとみかん、りんご、にんじんの3つ全てが表示されてしまいませんか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問