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。

＆＃13;

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

＆＃13;

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

＆＃13;

选中复选框上的隐藏表格行

1 个答案: