ボタンを押すことでtableタグ内の特定の列が表示/非表示されるようにしたい

前提・実現したいこと

ボタンを押すと、tableタグ内の特定の列の<th>にクラス名が追加されることで、
真下の<td>列にも同じクラス名が追加され、非表示されるようにしたい。
また初めについた<th>のクラス名が削除されると、同じ列の<td>についていたクラス名も削除されるように
なってほしいのですが、書き方がわかりません。

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

特定の列を取得してその中の特定の要素にクラス名を追加するやり方がわかりません。

該当のソースコード

html
1<div><!--チェックボックス-->
2　<ul>
3　　<li>
4　　　<label for="item-1"><input type="checkbox" value="1" id="item-1">アイテム1</label>
5　　</li>
6　　<li>
7　　　<label for="item-2"><input type="checkbox" value="2" id="item-2">アイテム2</label>
8　　</li>
9　</ul>
10</div>
11
12<div><!--ボタン-->
13  <button class="execution">実行</button>
14  <button class="reset">リセット</button>
15</div>
16
17<table>
18 <thead>
19   <tr>
20     <td></td>
21     <th data-selection="1">アイテム1-1</th>
22     <th data-selection="1">アイテム1-2</th>
23     <th data-selection="2">アイテム2-1</th>
24   </tr>
25 </thead>
26 <tbody>
27   <tr>
28     <th>テキストA</th>
29     <td>テキストA-1</td>
30     <td>テキストA-2</td>
31     <td>テキストA-3</td>
32   </tr>
33   <tr>
34     <th>テキストB</th>
35     <td>テキストB-1</td>
36     <td>テキストB-2</td>
37     <td>テキストB-3</td>
38   </tr>
39 </tbody>
40</table>

CSS
1.hide{
2    display: none;
3}

jquery
1$(function() {
2  $('.execution').click(function() {
3//アイテム1をチェックして実行ボタンを押すとアイテム1だけ表示
4    if ($('[value="1"]').prop('checked')) {  
5      $('[data-selection="2"]').addClass('hide')
6      $('[data-selection="1"]').removeClass('hide')
7    };
8//アイテム2をチェックして実行ボタンを押すとアイテム2だけ表示
9   if ($('[value="2"]').prop('checked')) {
10     $('[data-selection="1"]').addClass('hide')
11     $('[data-selection="2"]').removeClass('hide')
12   };
13//両方チェックして実行ボタンを押すと全て表示
14   if ($('[value="1"]').prop('checked') && $('[value="2"]').prop('checked')) {
15     $('[data-selection="1"]').removeClass('hide')
16     $('[data-selection="2"]').removeClass('hide')
17     $('tbody td').removeClass('hide')
18    };
19  })
20});
21
22//リセットボタンを押すと全て表示
23$(function() {
24  $('.reset').click(function() {
25    $('[data-selection="1"]').removeClass('hide')
26    $('[data-selection="2"]').removeClass('hide')
27    $('tbody td').removeClass('hide')
28    $('[type="checkbox"]').prop('checked', false);
29  })
30});
31

試したこと

jquery
1$(function() {
2  $('.execution').click(function() {
3
4  var hide = $('.hide');
5  var col_no = $(hide).index('thead th');
6  var temp ="";
7
8    $('td').each(function(index, element) {
9
10      for(var i=1; i < ($("tbody").children().length + 1); i++){
11
12      var grp = $("tr:eq(" + i + ") td:eq(" + col_no + ")" );
13
14      $(grp).addClass("hide");
15      }
16
17    });
18
19  })
20});
21

試したこと

実行ボタンを押したところ、hideクラスがついている0番目の列だけ消えてしまいます。
hideクラスがついた複数の列を消すにはeach()を使えばいいのだと思うのですが、
うまくいきません。
あと、別のボタンを押すことで消えていた<th>が復活しても<td>は再表示されません。

<td>の切替も併せて、どう書けばいいのかわからなくなってしまいました。

ご教授のほどよろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

HTMLの方にもう少し工夫ができたらJSコードの方ももっと簡単にできますが、そのままのHTMLで動かすとしたら、以下のようなやり方でいけるはずです。
リセットの方は提示されたそのままのコードで問題なく動作しますが、もっと短くできるので、ご参考までに書き換えてみました。

jQuery
1$(function() {
2    // 実行ボタンを押すと該当列が非表示になる
3    $('.execution').click(function() {
4        let values = [],    // チェックされたcheckboxの値を格納
5            col_index = []; // 列のindexを格納
6
7        // チェックされたcheckboxの値を取得
8        $('[type="checkbox"]:checked').each(function(){
9            values.push(parseInt($(this).val()));
10        });
11  
12        // checkboxがチェックされている場合、該当する列のindexを取得
13        if (values) {
14            $('thead tr').children().each(function(index, element){
15                if ($.inArray($(element).data('selection'), values) != -1) {
16                    col_index.push(index);
17                }
18            });
19
20            // 全ての行について、該当列にhideクラスを付与
21            $.each(col_index, function(index, value){
22                $('tr').each(function(){
23                    $(this).children().eq(value).addClass('hide');
24                });
25            });
26        }
27    });
28
29    //リセットボタンを押すと全て表示
30    $('.reset').click(function() {
31        $('.hide').removeClass('hide');
32        $('[type="checkbox"]').prop('checked', false);
33    });
34});