隠すテーブルの行が

Question

をチェックし、私は、チェックボックスの行がデータベースから受け取った：

<?php foreach($user_types as $user_type): ?>  
<label class="custom-control custom-checkbox input-process"> 
    <input type="checkbox" class="custom-control-input user-filter" data-id3="<?=$user_type['user_type']?>" name='user_type[]' value="<?=$user_type['user_type']?>"> 
    <span class="custom-control-indicator"></span> 
    <span class="custom-control-description"><?= $user_type['user_type'] ?></span> 
</label> 
<?php endforeach; ?> 

を通常それはのようなものです：

そして私は、ユーザーとテーブルがあります。

を

<table class="table table-bordered table-striped accordion-users"> 
    <thead class="thead-inverse"> 
    <tr> 
     <th>users</th> 
    </tr>     
    </thead> 
    <tfoot> 
    <tr> 
     <th>users</th> 
    </tr> 
    </tfoot> 
    <tbody> 
    <?php if(!empty($users)): ?> 
    <?php foreach($users as $usr): ?> 
     <tr class="filter-row" data-id3="<?=$usr['user_type'];?>" id="row<?=$usr['user_type'];?>"><td><?= strtolower($usr['username']); ?></td></tr> 
    <?php endforeach; ?> 
    <?php endif; ?> 
    </tbody> 
</table> 

私がしたいのは、フィルタを適用することです。チェックボックスをオンにすると、必要なuser_typesだけを残してください。

$(function() { 
// console.clear(); 
$('.user-filter').click(function() { 
    var user_type = $(this).data("id3"); 
    $(".accordion-users tr").each(function() { 
     var trow_id = $(this).data("id3"); // Here you go 
     if(trow_id === user_type){ 
      //$("#row"+user_type).toggle('slow'); 
      //$('.filter-row').toggle('slow'); 
      console.log(trow_id); 

     } 
     //console.log(trow_id); 
    });  

    $('.test').html(user_type); 
});   
}); 

私はテーブル内の各行のIDを受け取り、それを比較してみました：私は私のスクリプトで試してみました何

。今私は次に何をすべきか分からない。これに関する解決策はありますか？

Answer 1

クリックしたチェックボックスのフィルタ値でテーブルの行だけを選択するように各ループのセレクタを編集しました。それからチェックボックスがチェックされているかどうかチェックしています。それがチェックされていれば私はtrを表示しています、もしそうでなければ私はtrを隠しています。

$(function() { 
 
    $('.user-filter').click(function() { 
 
    var user_type = $(this).data("id3"); 
 
    var checked = $(this).is(':checked'); 
 
    $(".accordion-users tr[data-id3=" + user_type + "]").each(function() { 
 
     if (checked) 
 
     $(this).show(); //Show if checkbox is checked 
 
     else 
 
     $(this).hide(); //Hide if checkbox is not checked 
 
    }); 
 

 
    $('.test').html(user_type); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="custom-control custom-checkbox input-process"> 
 
    <input type="checkbox" class="custom-control-input user-filter" data-id3="FT" name='user_type[]' value="FT" checked> FT 
 
    <input type="checkbox" class="custom-control-input user-filter" data-id3="CT" name='user_type[]' value="CT" checked> CT 
 
</label> 
 

 
<table class="table table-bordered table-striped accordion-users"> 
 
    <thead class="thead-inverse"> 
 
    <tr> 
 
     <th>users</th> 
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 
    <tr> 
 
     <th>users</th> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr class="filter-row" data-id3="CT" id="rowCT"> 
 
     <td>Usr 1 (CT)</td> 
 
    </tr> 
 
    <tr class="filter-row" data-id3="FT" id="rowFT"> 
 
     <td>Usr 2 (FT)</td> 
 
    </tr> 
 
    <tr class="filter-row" data-id3="FT" id="rowFT"> 
 
     <td>Usr 3 (FT)</td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>