

JavaScript(jquery)での絞り込みにトライしており、ご教示いただけますでしょうか。

一番下のコードのようにリストタグでの絞り込みはできますが、以下のテーブル全体を表示したり、非表示はできないのでしょうか？（赤のセレクトボックスを選択する場合、一度のテーブル全体を表示したまま、かぼちゃ、キウイのtableは非表示とする。）

[code]

    <table border="1">
      <tr>
        <th>いちご</th>
      </tr>
      <tr>
        <td>種類</td><td>野菜</td>
      </tr>
      <tr>
        <td>色</td><td>赤</td>
      </tr>
    </table>
    
    
    <table border="1">
      <tr>
        <th>かぼちゃ</th>
      </tr>
      <tr>
        <td>種類</td><td>野菜</td>
      </tr>
      <tr>
        <td>色</td><td>黄色</td>
      </tr>
    </table>
    
    <table border="1">
      <tr>
        <th>キウイ</th>
      </tr>
      <tr>
        <td>種類</td><td>果物</td>
      </tr>
      <tr>
        <td>色</td><td>緑</td>
      </tr>
    </table>
    
[/code]

★ためしに、以下のようにtableで囲って書いてみましたが、うまくいきませんでした。

[code]

    <table class="list_item" data-kind="野菜" data-color="赤色">いちご 種類: 野菜 色: 赤色</table>
    
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <title>JavaScript Practice</title>
      <style>
        .search-box_label {
        font-weight: bold;
    }
    .is-hide {
        display: none;
    }
      </style>
      
    </head>
    <body>
        <form>
            <div class="search-box">
                <span class="search-box_label">種類:</span>
                <input type="radio" name="kind" value="">ALL
                <input type="radio" name="kind" value="野菜">野菜
                <input type="radio" name="kind" value="果物">果物
            </div>
        
            <div class="search-box">
                <span class="search-box_label">色:</span>
                <input type="checkbox" name="color" value="赤色">赤色
                <input type="checkbox" name="color" value="緑色">緑色
                <input type="checkbox" name="color" value="黄色">黄色
            </div>
        </form>
        
        <ul class="list">
            <li class="list_item" data-kind="野菜" data-color="赤色">いちご 種類: 野菜 色: 赤色</li>
            <li class="list_item" data-kind="野菜" data-color="黄色">かぼちゃ 種類: 野菜 色: 黄色</li>
            <li class="list_item" data-kind="野菜" data-color="緑色">キャベツ 種類: 野菜 色: 緑色</li>
            <li class="list_item" data-kind="果物" data-color="赤色">さくらんぼ 種類: 果物 色: 赤色</li>
            <li class="list_item" data-kind="野菜" data-color="緑色">すいか 種類: 野菜 色: 緑色</li>
            <li class="list_item" data-kind="果物" data-color="緑色">キウイ 種類: 果物 色: 緑色</li>
            <li class="list_item" data-kind="果物" data-color="黄色">バナナ 種類: 果物 色: 黄色</li>
            <li class="list_item" data-kind="野菜" data-color="緑色">メロン 種類: 野菜 色: 緑色</li>
            <li class="list_item" data-kind="果物" data-color="赤色">りんご 種類: 果物 色: 赤色</li>
            <li class="list_item" data-kind="果物" data-color="黄色">レモン 種類: 果物 色:黄色 </li>
        </ul>
    
      <script>
       var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
    var listItem = '.list_item';   // 絞り込み対象のアイテム
    var hideClass = 'is-hide';     // 絞り込み対象外の場合に付与されるclass名
    
    $(function() {
     // 絞り込み項目を変更した時
     $(document).on('change', searchBox + ' input', function() {
      search_filter();
     });
    });
    
    /**
     * リストの絞り込みを行う
     */
    function search_filter() {
     // 非表示状態を解除
     $(listItem).removeClass(hideClass);
     for (var i = 0; i < $(searchBox).length; i++) {
      var name = $(searchBox).eq(i).find('input').attr('name');
      // 選択されている項目を取得
      var searchData = get_selected_input_items(name);
      // 選択されている項目がない、またはALLを選択している場合は飛ばす
      if(searchData.length === 0 || searchData[0] === '') {
       continue;
      }
      // リスト内の各アイテムをチェック
      for (var j = 0; j < $(listItem).length; j++) {
       // アイテムに設定している項目を取得
       var itemData = $(listItem).eq(j).data(name);
       // 絞り込み対象かどうかを調べる
       if(searchData.indexOf(itemData) === -1) {
        $(listItem).eq(j).addClass(hideClass);
       }
      }
     }
    }
    
    
    /**
     * inputで選択されている値の一覧を取得する
     * @param  {String} name 対象にするinputのname属性の値
     * @return {Array}       選択されているinputのvalue属性の値
     */
    function get_selected_input_items(name) {
     var searchData = [];
     $('[name=' + name + ']:checked').each(function() {
      searchData.push($(this).val());
     });
     return searchData;
    }
      </script>
       <script src="script.js"></script>
    </body>
    </html>
[/code]


CC BY-SA 4.0
2019-12-18T07:16:23.363
61540
2019-12-18T07:22:23.243
2019-12-18T07:22:23.243
19110
35794
question
javascript jquery
JavaScriptで絞り込み。テーブル全体を絞り込み