jQuery - 使用类名数组过滤表行

Question

我有一个包含一些值的表和一个过滤器选项，用户可以在其中选择多个值并过滤表。我想要实现的是有一个数字从 1 到 10 的过滤器，当我从过滤器中选择数字 1 并单击它时，表 tr 的类名称为 filter_1、filter_2、filter_3 等，它将仅显示类为filter_1 的tr。 我的代码如下。

HTML：

<select multiple id="filterNumber">
<option value="1">1</option><option value="1">2</option><option value="1">3</option>
</select>
<button class="filterBtn">Filter</button>

表：

<table>
<thead><tr><th>Name</th></tr></thead>
<tbody>
<tr class="filter_1"><td>A</td></tr>
<tr class="filter_5"><td>B</td></tr>
<tr class="filter_1"><td>C</td></tr>
</thead>
</table>

jQuery:

$(document).on('click','.filterBtn',function(){
let filterNumber = $('#filterNumber).val();

//loop through this numbers and hide tr without this class name 
});

我知道如何通过 AJAX 将这些值传递到 DB 中并显示结果，但我正在尝试学习更多，比如从前端做的事情，这只会让我的应用程序更快。 但我不知道如何使用 JavaScript 或 jQuery 进行过滤。

Answer 1

选择所有 thdboy 行并隐藏它们。 选择该类的所有行并显示它们

$(document).on("click", '.filterBtn', function() {

  const filterNumber = $('#filterNumber').val();

  // create a comma seperated list of the class names to show
  var filters = filterNumber.map(function (num) {
    return '.filter_' + num
  }).join()
  
  var trs = $('table tbody tr') // select all the rows

  // if we have filters run the code
  if (filters.length) {
    trs
      .hide() // hide them
      .filter(filters) // find the rows with the class[es]
        .show() // show them
   } else {
     // no filters, just show everything
     trs.show()
   }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple id="filterNumber">
  <option value="1">Option 1</option>
  <option value="3">Option 3</option>
  <option value="5">Option 5</option>
</select>
<button type="button" class="filterBtn">Filter</button>


<table>
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="filter_1">
      <td>A1</td>
    </tr>
    <tr class="filter_1">
      <td>A2</td>
    </tr>
    <tr class="filter_5">
      <td>B</td>
    </tr>
    <tr class="filter_3">
      <td>C</td>
    </tr>
    </tbody>
</table>

Answer 2

单击按钮后，您就可以像以前一样获取所需的值。之后，您可以使用jQuery将hide类添加到每个没有过滤类的tr，使用tr:not(.className)，如下例所示：

$(document).on('click', '.filterBtn', function(){
 let filterNumber = $('#filterNumber').val();
 let className = 'filter_' + filterNumber;
 $('table tbody tr:not(.'+className+')').addClass('hide');
});

请注意，如果您过滤了多次，如果您之前过滤过其他内容，您还需要提供一种删除隐藏类的方法。所以你只需添加

$('table tr.'+className+'').removeClass('hide');

如果过滤器元素已先前过滤掉，则删除隐藏类。

编辑：

由于这是一个多选，我首先将hide 类应用于每个元素，然后循环选择值并从其类与所选数字匹配的值中删除hide。

$(document).on('click', '.filterBtn', function(){
   $('table tbody').find('tr').addClass('hide');
   let filterNumbersArray = $('#filterNumber').val();
   for(i=0; i<filterNumbersArray.length; i++){
      let className = 'filter_' + filterNumbersArray[i];
      $('table tbody tr.'+className+'').removeClass('hide');
   }
});

Answer 3

添加hideable 或类似名称，以免选择错误。

<table>
<thead><tr><th>Name</th></tr></thead>
<tbody>
<tr class="filter_1 hideable"><td>A</td></tr>
<tr class="filter_5 hideable"><td>B</td></tr>
<tr class="filter_1 hideable"><td>C</td></tr>
</thead>
</table>

全部隐藏，然后显示可见的：

$(document).on('click','.filterBtn',function(){
  const filterNumbers = $('#filterNumber').val().toArray().map(item => item.value);

   $('.hideable').addClass( "hidden" ); 

  filterNumbers.forEach(num => 
    $(`.filter_${number}`).each(function() {
      $(this).removeClass("hidden"); 
    })
  )
}

您需要使用display:none 为.hidden 添加一个类到您的CSS

多选值：https://stackoverflow.com/a/55929605/1758461

jQuery each(): https://api.jquery.com/each/#each-function

Answer 4

如果您的行具有与选择值关联的类，那么您可以使用类来选择要隐藏和显示的行。 请注意我是如何首先选择所有行以删除类hide。然后，我将 hide 添加到所有不共享所选玻璃的行。

     jQuery("#c_selector").change(function(){
        jQuery('table tbody tr').removeClass('hide');
        var cat_id = jQuery("#c_selector option:selected").val();
        console.log(cat_id)
        jQuery('table tbody tr:not(.itemtext.c_id'+cat_id+')').addClass('hide');
    })

也许这对某人有帮助！