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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

Q&A

解決済

1回答

3819閲覧

tableをcheckboxを使って絞り込みする方法について

asakuta

総合スコア100

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/07/12 03:15

編集2019/07/12 04:12

前提・実現したいこと

tableをcheckboxを使って絞り込みする方法についてチェックされたときの処理はできましたが
複数チェック時の絞り込み処理がどうしても思いつきません。
理想はチェックするたびに絞り込みされていき、チェックを外すと絞り込みが解除されるものです。

該当のソースコード

html

1<table id="abcd" class="target-area sort"> 2 <tr class="emp_index"> 3 <th class="sort" data-sort="All_emp_name">社員名</th> 4 <th class="sort" data-sort="All_emp_gender">性別</th> 5 <th class="sort" data-sort="All_dept_name">部署</th> 6 </tr> 7 <tbody class="list"> 8 <tr class=""> 9 <td class="All_emp_name">小次郎</td> 10 <td class="All_emp_gender">男性</td> 11 <td class="All_dept_name">1部</td> 12 </tr> 13 <tr class=""> 14 <td class="All_emp_name">太郎</td> 15 <td class="All_emp_gender">女性</td> 16 <td class="All_dept_name">3部</td> 17 </tr> 18 <tr class=""> 19 <td class="All_emp_name">新之助</td> 20 <td class="All_emp_gender">女性</td> 21 <td class="All_dept_name">3部</td> 22 </tr> 23 </tbody> 24</table> 25<div class="search-box"> 26 <span class="search-box_label">性別:</span> 27 <input type="checkbox" name="search_check" value="男性">男性 28 <input type="checkbox" name="search_check" value="女性">女性 29</div> 30 31<div class="search-box"> 32 <span class="search-box_label">部署:</span> 33 <input type="checkbox" name="search_check" value="1部">1部 34 <input type="checkbox" name="search_check" value="2部">2部 35 <input type="checkbox" name="search_check" value="3部">3部 36</div> 37 38<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 39<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 40<script> 41 $(function () { 42 searchcheck = function(){ 43 // チェックボックスでチェックされた値の取得 44 var searchcheck = $(this).val(), 45 targetText; 46 47 $('.target-area tr').each(function() { 48 targetText = $(this).text(); 49 50 if (targetText.indexOf(searchcheck) != -1) { 51 $(this).removeClass('hidden'); 52 } else { 53 $(this).addClass('hidden'); 54 } 55 }); 56 }; 57 58 // searchcheckの実行 59 $('input[name="search_check"]').change(searchcheck); 60}); 61</script>

css

1.target-area .hidden:not(.emp_index){ 2 display: none 3}

理想のテーブル状況

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

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

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

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

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

Lhankor_Mhy

2019/07/12 03:29

AND条件ですか?OR条件ですか?
asakuta

2019/07/12 03:31

AND条件です
yambejp

2019/07/12 03:42 編集

同じカテゴリ内はOR検索ですよね? 男AND女はありえないので それと初期状態ですべてチェックがはずれていますが そうなるとテーブルの初期状態は表示なしですか?
asakuta

2019/07/12 04:05 編集

混乱させて申し訳ありませんAND検索で間違いないです。 理想の状態を画像で追加いたします。 初期状態は全てのテーブルが表示されていて チェックした項目に対応する値を残すのが理想です
yambejp

2019/07/12 04:09

> 混乱させて申し訳ありませんAND検索で間違いないです。 そうなると男女にチェックをいれると表示が0になるということで大丈夫ですか? チェックなしで全部表示すると、ロジックが矛盾しますが大丈夫ですね?
asakuta

2019/07/12 04:14

表示をしないものではなく表示するものをチェックで入れる感じです。 画像を追加しました。混乱させて申し訳ありません。
guest

回答1

0

ベストアンサー

普通にやるならこうです

javascript

1<script> 2$(function(){ 3 $(':checkbox').prop('checked',true).on('change',function(){ 4 var gender=$('[name=search_gender]:checked').map(function(){ 5 return $(this).val(); 6 }).get(); 7 var dept=$('[name=search_dept]:checked').map(function(){ 8 return $(this).val(); 9 }).get(); 10 $('#abcd tbody tr').each(function(){ 11 $(this).toggle( 12 $.inArray($(this).find('td.All_emp_gender').text(),gender)>=0 && 13 $.inArray($(this).find('td.All_dept_name').text(),dept)>=0 14 ); 15 }); 16 }).eq(0).trigger('change'); 17}); 18</script> 19 20<div class="search-box"> 21 <span class="search-box_label">性別:</span> 22 <label><input type="checkbox" name="search_gender" value="男性">男性</label> 23 <label><input type="checkbox" name="search_gender" value="女性">女性</label> 24</div> 25 26<div class="search-box"> 27 <span class="search-box_label">部署:</span> 28 <label><input type="checkbox" name="search_dept" value="1部">1</label> 29 <label><input type="checkbox" name="search_dept" value="2部">2</label> 30 <label><input type="checkbox" name="search_dept" value="3部">3</label> 31</div> 32 33<table id="abcd" class="target-area sort" border> 34<thead> 35<tr class="emp_index"> 36 <th class="sort" data-sort="All_emp_name">社員名</th> 37 <th class="sort" data-sort="All_emp_gender">性別</th> 38 <th class="sort" data-sort="All_dept_name">部署</th> 39 </tr> 40</thead> 41 <tbody class="list"> 42 <tr class=""> 43 <td class="All_emp_name">小次郎</td> 44 <td class="All_emp_gender">男性</td> 45 <td class="All_dept_name">1</td> 46 </tr> 47 <tr class=""> 48 <td class="All_emp_name">太郎</td> 49 <td class="All_emp_gender">女性</td> 50 <td class="All_dept_name">3</td> 51 </tr> 52 <tr class=""> 53 <td class="All_emp_name">新之助</td> 54 <td class="All_emp_gender">女性</td> 55 <td class="All_dept_name">3</td> 56 </tr> 57 <tr class=""> 58 <td class="All_emp_name">ほげ</td> 59 <td class="All_emp_gender">女性</td> 60 <td class="All_dept_name">1</td> 61 </tr> 62 </tbody> 63</table> 64

もしチェックなしを全選択と想定する場合はこう

javascript

1$(function(){ 2 $(':checkbox').on('change',function(){ 3 var gender=$('[name=search_gender]:checked').map(function(){ 4 return $(this).val(); 5 }).get(); 6 var dept=$('[name=search_dept]:checked').map(function(){ 7 return $(this).val(); 8 }).get(); 9 $('#abcd tbody tr').each(function(){ 10 $(this).toggle( 11 (gender.length==0 || $.inArray($(this).find('td.All_emp_gender').text(),gender)>=0 )&& 12 (dept.length==0 || $.inArray($(this).find('td.All_dept_name').text(),dept)>=0) 13 ); 14 }); 15 }).eq(0).trigger('change');

投稿2019/07/12 04:19

編集2019/07/12 04:23
yambejp

総合スコア114585

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

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

asakuta

2019/07/12 04:43

じっくりプログラムを読み解いて勉強してみます。 ありがとうございました。
yambejp

2019/07/12 05:17

AND検索とOR検索を誤解しているようなのでよく検討してみてください genderよdeptをANDで処理する場合は命題のように同じ search_checkという名前で管理するのは無理です。 それもあわせてご自身の命題と私の回答の命名ルールの違いなど確認ください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問