teratail
回答率
85.29%
質問するログイン新規登録
トップJavaScriptに関する質問javascript で table の行を絞り込み表示

Q&A

解決済

2回答

3550閲覧

javascript で table の行を絞り込み表示

ChocolateFct
ChocolateFct

総合スコア8

JavaScript

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

0グッド

0クリップ

投稿2018/01/25 06:28

編集2018/01/25 07:11

0

0

セレクトボックスとチェックボックスを使って、tableの行を絞り込み表示させたいです。
（javascript初心者なのでオープンソースを書き換えて使用しています。）

最初はtableの行が全て表示している状態で、セレクトボックスとチェックボックスでAND検索させていきたいです。

できれば、全ての選択を解除する「選択をクリアする」ボタンと、該当データが無い場合に空欄ではなく「該当がありません」が表示されればベストです。

よろしくお願いいたします。

発生している問題・エラーメッセージ

セレクトボックスは2項目設置し連動できたのですが、チェックボックスでの複数選択が増えた場合にわからなくなってしまいました、、、

該当のソースコード

検索項目は3つです。

<div id="search-bx">

<select id="1-select" class="store-select" name="area">
<option value="">地域から検索</option>
<option value="1area">1-地域</option>
<option value="2area">2-地域</option>
<option value="3area">3-地域</option>
</select>

<div id="2-checkbox">
<label><input type="checkbox" class="checkbox-input" name="city" value="1-city">1-都市</label>
<label><input type="checkbox" class="checkbox-input" name="city" value="2-city">2-都市</label>
<label><input type="checkbox" class="checkbox-input" name="city" value="3-city">3-都市</label>
</div>

<select id="3-select" class="store-select" name="brand">
<option value="">ブランド検索</option>
<option value="1-brand">1-ブランド</option>
<option value="2-brand">2-ブランド</option>
<option value="3-brand">3-ブランド</option>
</select>

</div>

検索対象テーブル

<div id="store-data">
<table>
<thead>
<tr class="active">
<td>地域</td>
<td>都市</td>
<td>ブランド</td>
</tr>
</thead>
<tbody>
<tr>
<td class="area"><span class="1-aaa">1-地域</span></td>
<td class="city"><span class="1-city">1-都市</span></td>
<td class="brand"><span class="1-brand">1-ブランド</span></td>
</tr>
<tr>
<td class="area"><span class="1-aaa">1-地域</span></td>
<td class="city"><span class="2-city">2-都市</span></td>
<td class="brand"><span class="2-brand">2-ブランド</span></td>
</tr>
<tr>
<td class="area"><span class="1-aaa">1-地域</span></td>
<td class="city"><span class="3-city">3-都市</span></td>
<td class="brand"><span class="3-brand">3-ブランド</span></td>
</tr>
</tbody>
</table>
</div>

javascriptは下記のようにしたら、セレクトボックス2項目はうまくいきました。
チェックボックスを追加するにはどのようにしたらよいでしょうか？

$(function() {
    var lists = $('#store-data table tbody tr');
    $(document).on('change', '#search-bx select', function() {
        lists.show();
        for (var i = 0; i < $('#search-bx select').length; i++) {
            // 絞り込みの項目を取得
            var item = $('#search-bx select').eq(i).attr('name');
            // 絞り込みの対象を取得
            var target = $('#search-bx select').eq(i).val();
 
            if(target != '') {
                for (var j = 0; j < lists.length; j++) {
                    // 絞り込み対象でない場合は非表示
                    if(!lists.eq(j).find('.' + item).find('span').hasClass(target)) {
                        lists.eq(j).hide();
                    }
                };
            }
        };
    });
});

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

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

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

yambejp
yambejp

2018/01/25 06:39

すべて未選択だった場合はALLで表示するのでしょうか？一切表示しないのでしょうか？また地域・都市・ブランドの相互の関係はand検索なのでしょうかor検索なのでしょうか？
ChocolateFct
ChocolateFct

2018/01/25 06:47

最初の表示はtable全て表示です、未選択の場合も全て表示です。地域と都市とブランドは相互にAND検索で絞りこめるようにしたいです。できれば、最後に「選択をクリアする」ボタンを付けられたらいいのかなとも思っています。
ChocolateFct
ChocolateFct

2018/01/25 06:48

あと、できれば該当しない場合に空欄ではなく「該当項目がありません。」と表示させるのはできるでしょうか？
m.ts10806
m.ts10806

2018/01/25 07:07

後半、質問テンプレート部分が残っています。見ている人に正しく伝わらない原因になりかねませんので、本質門内容と関係ない部分は精査願います。
guest

回答2件

0

ベストアンサー

テーブルのareaの使い方がちょっとおかしいみたいなので原文のままではありませんが
以下でどうでしょうか？

javascript
1
2$(function(){
3  $('#1-select,.checkbox-input,#3-select').on('change',function(){
4    var area=$('#1-select').val();
5    var city=[];
6    $('.checkbox-input:checked').each(function(){city.push($(this).val())});
7    var brand=$('#3-select').val();
8    if(area=="" && city.length==0 && brand==""){
9      $('#store-data table tr').show();
10    }else{
11      var tr=$('#store-data table tr').hide().filter(function(){
12        return area==""?true:$(this).has("."+area).length>0;
13      }).filter(function(){
14        return brand==""?true:$(this).has("."+brand).length>0;
15      }).filter(function(){
16        return city.length==0?true:$(this).has("."+city.join(",.")).length>0;
17      }).show();
18    }
19  }).eq(0).trigger('change');
20});
21
HTML
1<div id="search-bx">
2
3<select id="1-select" class="store-select" name="area">
4<option value="">地域から検索</option>
5<option value="1-area">1-地域</option>
6<option value="2-area">2-地域</option>
7<option value="3-area">3-地域</option>
8</select>
9
10<div id="2-checkbox">
11<label><input type="checkbox" class="checkbox-input" name="city" value="1-city">1-都市</label>
12<label><input type="checkbox" class="checkbox-input" name="city" value="2-city">2-都市</label>
13<label><input type="checkbox" class="checkbox-input" name="city" value="3-city">3-都市</label>
14</div>
15
16<select id="3-select" class="store-select" name="brand">
17<option value="">ブランド検索</option>
18<option value="1-brand">1-ブランド</option>
19<option value="2-brand">2-ブランド</option>
20<option value="3-brand">3-ブランド</option>
21</select>
22
23</div>
24
25<div id="store-data">
26<table>
27<thead>
28<tr class="active">
29<td>地域</td>
30<td>都市</td>
31<td>ブランド</td>
32</tr>
33</thead>
34<tbody>
35<tr>
36<td class="area"><span class="1-area">1-地域</span></td>
37<td class="city"><span class="1-city">1-都市</span></td>
38<td class="brand"><span class="1-brand">1-ブランド</span></td>
39</tr>
40<tr>
41<td class="area"><span class="1-area">1-地域</span></td>
42<td class="city"><span class="2-city">2-都市</span></td>
43<td class="brand"><span class="2-brand">2-ブランド</span></td>
44</tr>
45<tr>
46<td class="area"><span class="1-area">1-地域</span></td>
47<td class="city"><span class="3-city">3-都市</span></td>
48<td class="brand"><span class="3-brand">3-ブランド</span></td>
49</tr>
50</tbody>
51</table>
52</div>

クリアと該当なし

クリアと該当なしを付けるの忘れてました

javascript
1$(function(){
2  $('#1-select,.checkbox-input,#3-select').on('change',function(){
3    var area=$('#1-select').val();
4    var city=[];
5    $('.checkbox-input:checked').each(function(){city.push($(this).val())});
6    var brand=$('#3-select').val();
7    $('#err').remove();
8    if(area=="" && city.length==0 && brand==""){
9      $('#store-data table tr').show();
10    }else{
11      var tr=$('#store-data table tr').hide().filter(function(){
12        return area==""?true:$(this).has("."+area).length>0;
13      }).filter(function(){
14        return brand==""?true:$(this).has("."+brand).length>0;
15      }).filter(function(){
16        return city.length==0?true:$(this).has("."+city.join(",.")).length>0;
17      }).show();
18      if(tr.length==0){
19        $("#store-data table").after($('<div>').attr('id','err').text("該当なし"));
20      }
21    }
22  }).eq(0).trigger('change');
23  $('#reset').on('click',function(e){
24    $('#1-select').prop('selectedIndex',0);
25    $('.checkbox-input').prop('checked',false);
26    $('#3-select').prop('selectedIndex',0).trigger('change');
27  });
28});
HTML
1<div id="search-bx">
2<select id="1-select" class="store-select" name="area">
3<option value="">地域から検索</option>
4<option value="1-area">1-地域</option>
5<option value="2-area">2-地域</option>
6<option value="3-area">3-地域</option>
7</select>
8
9<div id="2-checkbox">
10<label><input type="checkbox" class="checkbox-input" name="city" value="1-city">1-都市</label>
11<label><input type="checkbox" class="checkbox-input" name="city" value="2-city">2-都市</label>
12<label><input type="checkbox" class="checkbox-input" name="city" value="3-city">3-都市</label>
13</div>
14
15<select id="3-select" class="store-select" name="brand">
16<option value="">ブランド検索</option>
17<option value="1-brand">1-ブランド</option>
18<option value="2-brand">2-ブランド</option>
19<option value="3-brand">3-ブランド</option>
20</select>
21
22<input type="button" id="reset" value="選択をクリアする">
23</div>
24
25<div id="store-data">
26<table>
27<thead>
28<tr class="active">
29<td>地域</td>
30<td>都市</td>
31<td>ブランド</td>
32</tr>
33</thead>
34<tbody>
35<tr>
36<td class="area"><span class="1-area">1-地域</span></td>
37<td class="city"><span class="1-city">1-都市</span></td>
38<td class="brand"><span class="1-brand">1-ブランド</span></td>
39</tr>
40<tr>
41<td class="area"><span class="1-area">1-地域</span></td>
42<td class="city"><span class="2-city">2-都市</span></td>
43<td class="brand"><span class="2-brand">2-ブランド</span></td>
44</tr>
45<tr>
46<td class="area"><span class="1-area">1-地域</span></td>
47<td class="city"><span class="3-city">3-都市</span></td>
48<td class="brand"><span class="3-brand">3-ブランド</span></td>
49</tr>
50</tbody>
51</table>
52</div>

投稿2018/01/25 07:49

編集2018/01/25 08:09
yambejp
yambejp

総合スコア118268

ChocolateFct
ChocolateFct

2018/01/25 08:25

yambejpさま、ありがとうございます！！！ クリアボタンと該当なしも付けて頂いて、大変助かりました！ 私の入力ミスしていたareaの部分も書き換えて頂いてすみません、、 こちらでそのまま実装できそうです。 早速の回答に感謝申し上げます。ありがとうございました！
ChocolateFct
ChocolateFct

2018/02/08 10:56

yambejpさま 先日は誠にありがとうございました！！ もしお時間ございましたらお伺いしたいのですが、、、 検索対象の＜table tr＞にIDを与えて、検索対象同士で表示の行き来をさせることは可能でしょうか？ 例えば「1-ブランド」しか表示されなかった場合に、「2-ブランド」もおすすめだよリンクを貼って「2-ブランド」も見てもらおう、という趣旨です。 その際は、セレクトメニューやチェックボックスは特にそのままでよいのですが、リセット（全表示）はいつでも効く状態がベストです。 不躾な質問で大変恐縮です。 もしお時間ございましたらどうぞよろしくお願いいたします。
guest

0

javascript
1$(function(){
2  $('[name="message[]"]').on('change',function(){
3    $(this).closest('td').next('td').find('input').prop('disabled',$(this).val()=="0");
4  }).trigger('change');
5});
HTML
1<table>
2<tr>
3<td>
4　　<select name="message[]" class="info_sel">
5      <option value="0"selected>なし</option>
6      <option value="1">あり</option>
7    </select>
8</td>
9<td class="day">
10　　 <input type="text" name="hoge" class="text">
11</td>
12</tr>
13<tr>
14<td>
15　　<select name="message[]" class="info_sel">
16      <option value="0"selected>なし</option>
17      <option value="1">あり</option>
18    </select>
19</td>
20<td class="day">
21　　 <input type="text" name="hoge" class="text">
22</td>
23</tr>
24<tr>
25<td>
26　　<select name="message[]" class="info_sel">
27      <option value="0"selected>なし</option>
28      <option value="1">あり</option>
29    </select>
30</td>
31<td class="day">
32　　 <input type="text" name="hoge" class="text">
33</td>
34</tr>
35</table>
36

投稿2018/02/08 11:15

yambejp
yambejp

総合スコア118268

ChocolateFct
ChocolateFct

2018/02/08 12:41

早速の回答ありがとうございます。 ですが、こちらの回答はどなたか別の質問と間違えてはおりませんでしょうか？ 先程のは、前回の頂いた回答に追加する形でできればと思っていたのですが、、 -------------------------- 検索対象の＜table tr＞にIDを与えて、検索対象同士で表示の行き来をさせることは可能でしょうか？ 例えば「1-ブランド」しか表示されなかった場合に、「2-ブランド」もおすすめだよリンクを貼って「2-ブランド」も見てもらおう、という趣旨です。 その際は、セレクトメニューやチェックボックスは特にそのままでよいのですが、リセット（全表示）はいつでも効く状態がベストです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問

トップJavaScriptに関する質問

javascript で table の行を絞り込み表示