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

Question

我有一个包含一些值的表和一个过滤器选项，用户可以在其中选择多个值并过滤表。我想要实现的是拥有一个包含从 1 到 10 的数字的过滤器，以及具有类名 filter_1、filter_2、filter_3 等。当我从过滤器中选择数字 1 并单击它时，它将仅显示具有 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 将这些值传递到数据库并显示结果，但我正在尝试学习更多信息，例如仅从前端进行操作，这会使我的应用程序更快。但我不知道如何使用 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>