jQuery

Question

我有一个 table，其中包含一些值和一个过滤器选项，用户可以在其中 select 多个值并过滤 table。我想要实现的是拥有一个数字从 1 到 10 的过滤器，以及 table tr 和 class 名称 filter_1、filter_2、filter_3 等当我从过滤器中选择数字 1 并单击它时，它只会显示带有 class 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:

<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

添加 hideable 或类似内容，以免 select 出错。

<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"); 
    })
  )
}

您需要为 .hidden

添加一个 class 到您的 CSS 和 display:none

多个select值：

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

Answer 2

点击您的按钮，您将获得所需的值，就像您所做的那样。之后，您可以使用 jQuery 将 hide class 添加到每个 tr 没有过滤的 class，与 tr:not(.className)，作为如下例所示：

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

请注意，如果您过滤了不止一次，如果您之前过滤过其他内容，则还需要包括一种删除隐藏的方法 class。所以你只需添加

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

删除隐藏 class 如果过滤器元素已被先前过滤掉。

编辑：

因为这是一个倍数 select，我会先将 hide class 应用于每个元素，然后遍历 selected 值并删除 hide 来自 class 匹配 selected 号码的人。

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

Select 所有 thdboy 行并隐藏它们。 Select 包含 class 的所有行并显示它们

$(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 4

如果您的行有 classes 与 selection 值关联，那么您可以使用 classes 来 select 隐藏和显示哪些行。请注意我如何 select 所有行首先删除 class 隐藏。然后，我将 hide 添加到所有不共享玻璃的行 selected.

     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');
    })

也许这对某人有帮助！

jQuery - 使用 class 名称数组过滤 table 行

jQuery - Filtering table rows using an array of class names

javascript

html

arrays

tablefilter