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

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

ただいまの
回答率

87.78%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,830

score 8

セレクトボックスとチェックボックスを使って、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();
                    }
                };
            }
        };
    });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2018/01/25 15:39

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

    キャンセル

  • ChocolateFct

    2018/01/25 15:47

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

    キャンセル

  • ChocolateFct

    2018/01/25 15:48

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

    キャンセル

  • m.ts10806

    2018/01/25 16:07

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

    キャンセル

回答 2

checkベストアンサー

+2

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

$(function(){
  $('#1-select,.checkbox-input,#3-select').on('change',function(){
    var area=$('#1-select').val();
    var city=[];
    $('.checkbox-input:checked').each(function(){city.push($(this).val())});
    var brand=$('#3-select').val();
    if(area=="" && city.length==0 && brand==""){
      $('#store-data table tr').show();
    }else{
      var tr=$('#store-data table tr').hide().filter(function(){
        return area==""?true:$(this).has("."+area).length>0;
      }).filter(function(){
        return brand==""?true:$(this).has("."+brand).length>0;
      }).filter(function(){
        return city.length==0?true:$(this).has("."+city.join(",.")).length>0;
      }).show();
    }
  }).eq(0).trigger('change');
});
<div id="search-bx">

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

 クリアと該当なし

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

$(function(){
  $('#1-select,.checkbox-input,#3-select').on('change',function(){
    var area=$('#1-select').val();
    var city=[];
    $('.checkbox-input:checked').each(function(){city.push($(this).val())});
    var brand=$('#3-select').val();
    $('#err').remove();
    if(area=="" && city.length==0 && brand==""){
      $('#store-data table tr').show();
    }else{
      var tr=$('#store-data table tr').hide().filter(function(){
        return area==""?true:$(this).has("."+area).length>0;
      }).filter(function(){
        return brand==""?true:$(this).has("."+brand).length>0;
      }).filter(function(){
        return city.length==0?true:$(this).has("."+city.join(",.")).length>0;
      }).show();
      if(tr.length==0){
        $("#store-data table").after($('<div>').attr('id','err').text("該当なし"));
      }
    }
  }).eq(0).trigger('change');
  $('#reset').on('click',function(e){
    $('#1-select').prop('selectedIndex',0);
    $('.checkbox-input').prop('checked',false);
    $('#3-select').prop('selectedIndex',0).trigger('change');
  });
});
<div id="search-bx">
<select id="1-select" class="store-select" name="area">
<option value="">地域から検索</option>
<option value="1-area">1-地域</option>
<option value="2-area">2-地域</option>
<option value="3-area">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>

<input type="button" id="reset" value="選択をクリアする">
</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-area">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-area">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-area">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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/25 17:25

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

    キャンセル

  • 2018/02/08 19:56

    yambejpさま
    先日は誠にありがとうございました!!
    もしお時間ございましたらお伺いしたいのですが、、、

    検索対象の<table tr>にIDを与えて、検索対象同士で表示の行き来をさせることは可能でしょうか?
    例えば「1-ブランド」しか表示されなかった場合に、「2-ブランド」もおすすめだよリンクを貼って「2-ブランド」も見てもらおう、という趣旨です。
    その際は、セレクトメニューやチェックボックスは特にそのままでよいのですが、リセット(全表示)はいつでも効く状態がベストです。

    不躾な質問で大変恐縮です。
    もしお時間ございましたらどうぞよろしくお願いいたします。

    キャンセル

0

$(function(){
  $('[name="message[]"]').on('change',function(){
    $(this).closest('td').next('td').find('input').prop('disabled',$(this).val()=="0");
  }).trigger('change');
});
<table>
<tr>
<td>
  <select name="message[]" class="info_sel">
      <option value="0"selected>なし</option>
      <option value="1">あり</option>
    </select>
</td>
<td class="day">
   <input type="text" name="hoge" class="text">
</td>
</tr>
<tr>
<td>
  <select name="message[]" class="info_sel">
      <option value="0"selected>なし</option>
      <option value="1">あり</option>
    </select>
</td>
<td class="day">
   <input type="text" name="hoge" class="text">
</td>
</tr>
<tr>
<td>
  <select name="message[]" class="info_sel">
      <option value="0"selected>なし</option>
      <option value="1">あり</option>
    </select>
</td>
<td class="day">
   <input type="text" name="hoge" class="text">
</td>
</tr>
</table>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/08 21:41

    早速の回答ありがとうございます。
    ですが、こちらの回答はどなたか別の質問と間違えてはおりませんでしょうか?

    先程のは、前回の頂いた回答に追加する形でできればと思っていたのですが、、

    --------------------------
    検索対象の<table tr>にIDを与えて、検索対象同士で表示の行き来をさせることは可能でしょうか?
    例えば「1-ブランド」しか表示されなかった場合に、「2-ブランド」もおすすめだよリンクを貼って「2-ブランド」も見てもらおう、という趣旨です。
    その際は、セレクトメニューやチェックボックスは特にそのままでよいのですが、リセット(全表示)はいつでも効く状態がベストです。

    キャンセル

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

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る