チェックボックスを使用してテーブルの列をフィルタリングする

Question

チェックボックスをオンにするかどうかに基づいて表示される列をフィルタリングしようとしているテーブルがあります。私はそれが期待したように動作しない最初の列を除いてほとんど働いています。この動作を示すfiddleを作成しました。ご覧のように、2番目の列は期待どおりにトグルされますが、最初の列では発生したくない他の要素も削除されます。私はこれがうまくいくはずですが、何が起こっているのか分かりません。誰かが私のコードの間違いがどこにあるのかを指摘し、それを修正するのを助けることができますか？私は現在、（フィドルに見られるように）フィルタリングするためにこれを使用しています

：ここ

$('#columnCheckboxes input:checkbox').on('click', function() { 
    let colToHide = $('#matrixTable th').filter("." + $(this).attr("name")); 
    let index = $(colToHide).index(); 
    $('#matrixTable').find('tr :nth-child(' + (index + 1) + ')').toggle(); 
}); 

UPDATE

は、私が使用していますhtmlです：

<div> 
    <div class="dropdown mb-2"> 
     <a class="btn btn-secondary dropdown-toggle" href="#" id="columnFilter" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <i class="fa fa-th fa-lg"></i> 
     </a> 
     <div class="dropdown-menu" aria-labelledby="columnFilter" id="columnCheckboxes"> 
      <a class="dropdown-item" href="#"><input type="checkbox" name="1" checked />&nbsp;Delivery Orders</a> 
      <a class="dropdown-item" href="#"><input type="checkbox" name="2" checked />&nbsp;Walk-in Orders</a> 
     </div> 
    </div> 
    <table class="table table-bordered" id="matrixTable"> 
     <thead> 
      <tr> 
       <th></th> 
       <th colspan="2">Event</th> 
      </tr> 
      <tr> 
       <th>Activity</th> 
       <th class="1">Delivery Orders</th> 
       <th class="2">Walk-in Orders</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <th scope="row"> 
        Till Activity 
       </th> 
       <td> 
        <input type="checkbox" checked /> 
       </td> 
       <td> 
        <input type="checkbox" checked /> 
       </td> 
      </tr> 
      <tr> 
       <th scope="row"> 
        Delivery Activity 
       </th> 
       <td> 
        <input type="checkbox" checked /> 
       </td> 
       <td> 
        <input type="checkbox" checked /> 
       </td> 
      </tr> 
      <tr> 
       <th scope="row"> 
        Pick Activity 
       </th> 
       <td> 
        <input type="checkbox" checked /> 
       </td> 
       <td> 
        <input type="checkbox" checked /> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Answer 1

「イベント」セルは、「受注」の列である第2列に属する。そのため、クリックして[配送オーダー]列を非表示にしたときは非表示になっています。 HTMLクラスを追加して、jQueryが非表示または表示する必要があるものを識別できるようにすることができます。