jqueryで【表示切替】と【ソート】がぶつかり、作動してくれない問題

Question

下記のjqueryでテーブルに【表示切替】と【ソート】の機能を持たせています。

それぞれは独立して機能するのです。けれど、【ソート】してからだと、【表示切替】が効かなくなるのです。

▼動くサンプル
https://jsfiddle.net/qwba8r09/

▼そのコード

<!-- チェックリスト -->
<ul class="list">
	<li>
    <input id="a" class="check" name="chk_alphabet" value="a" type="checkbox">
    <label for="a" class="check_label">a</label>
  </li>
	<li>
    <input id="b" class="check" name="chk_alphabet" value="b" type="checkbox">
    <label for="b" class="check_label">b</label>
  </li>
	<li>
    <input id="c" class="check" name="chk_alphabet" value="c" type="checkbox">
    <label for="c" class="check_label">c</label>
  </li>
</ul>

<!-- テーブル -->
<table id="t1">
     <thead>
          <tr>
               <th class="name">名前</th>
               <th class="1 a">➀a</th>
               <th class="2 b">➁b</th>
               <th class="3 b c">➂a/c</th> 
               <th class="4 a b c">➃a/b/c</th> 
               <th class="5 a c">⑤a/c</th> 
          </tr>
     </thead>
     <tbody>
         <tr>
             <td class="name">鈴木</td>
             <td class="a">12</td>
             <td class="b">19</td>
             <td class="b c">605</td>
             <td class="a b c">47</td>
             <td class="a c">23</td>
         </tr>
         <tr>
             <td class="name">高橋</td>
             <td class="a">25</td>
             <td class="b">89</td>
             <td class="b c">57</td>
             <td class="a b c">50</td>
             <td class="a c">64</td>
         </tr>
         <tr>
             <td class="name">佐藤</td>
             <td class="a">60</td>
             <td class="b">987</td>
             <td class="b c">9</td>
             <td class="a b c">25</td>
             <td class="a c">89</td>
         </tr>
         <tr>
             <td class="name">山田</td>
             <td class="a">604</td>
             <td class="b">78</td>
             <td class="b c">25</td>
             <td class="a b c">3</td>
             <td class="a c">140</td>
         </tr>
     </tbody>
</table>

////////////////////
////【表示切替】チェックしたものを含む列だけ表示
(function($){
  //対象一覧を取得
  var abc_list = $("#t1 thead tr th:not(:first-child), #t1 tbody tr td:not(.name)");

  //チェックボックスのチェック状態により作動
  $('.check').change(function(){
   //チェックされているボックスの情報を全て取る
   var alphabet = $('.check:checked').map(function() {
    return $(this).val();
   });

  //半角スペースで結合
    if(alphabet.length == 0){
        abc_list.css('display', 'none');
    }else{
        //対象一覧をループ
        for(i=0;i<abc_list.length;i++){
            hasCount = 0;
            for(alphabeti=0;alphabeti<alphabet.length;alphabeti++){
              if($(abc_list[i]).hasClass(alphabet[alphabeti])){
                hasCount++;
              }
            }
            if(hasCount==alphabet.length){ //チェックされたもの全て持っていれば表示
                $(abc_list[i]).css('display', 'table-cell');
            }else{
                  $(abc_list[i]).css('display', 'none');
            }
        }
    }
  });

})(jQuery);


////////////////////
//【ソート】名前clickで横にソート
$(function(){
  $('#t1 tbody td').filter(function(){
    return $(this).closest('tr').find('td').index(this)==0;
  }).on('click',function(){
    var list=$(this).siblings('td').map(function(x){return {idx:x+1,num:parseInt($(this).text())}}).get();
    list.sort(function(x,y){
      if(x["num"]==y["num"]) return 0;
      return x["num"]>y["num"]?1:-1;
    });
    $(this).closest('table').find('tr').each(function(){
      var self=$(this);
      list.forEach(function(x){
        self.find('td,th').eq(x["idx"]).clone().appendTo(self);
      });
      self.find('td,th').filter(':gt(0):lt('+list.length+')').remove();
    });
  });
});

これらの【表示切替】と【ソート】を仲睦まじく手を取り合って機能させるような呪文をご存じの方はいらっしゃいましたらご教示いただければと思い質問させて頂きました。
よろしくお願いいたします。

Answer 1

ごちゃっとしてあまり見てませんが、ソート時にabc_listの要素が削除されているような気がします。以下のようにするとうまくいくかもしれません。

  // jQuery要素をイベント内で取得
  $('.check').change(function(){
    var abc_list = $("#t1 thead tr th:not(:first-child), #t1 tbody tr td:not(.name)");
    ...

Comments

[退会済みユーザー]

おっしゃるとおりでした。助かりました。どうもありがとうございます。