mardi 19 septembre 2017

Hide table rows on checkbox checked

I have row of checkboxes received from database:

<?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; ?>

usualy its something like : enter image description here

And I have a table with users:

<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>

What I want to do is to apply filter. When I click on checkbox table should leave only required user_types.

What I tried in my script:

$(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);
});        
}); 

I tried to receive id of each row in the table and compare it. Now I am stucked not sure what should I do next. Are there any solutions on this? Thank you

Aucun commentaire:

Enregistrer un commentaire