jQuery - фильтрация строк таблицы с использованием массива имен классов

Question

У меня есть таблица с некоторыми значениями и опция фильтра, где пользователь может выбрать несколько значений и отфильтровать таблицу. Я пытаюсь добиться фильтра с номерами от 1 до 10 и таблицы tr с именами классов filter_1, filter_2, filter_3 et c. когда я выберу номер 1 из фильтра и нажму на него, он покажет только tr с классом filter_1. Мой код ниже.

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

Нажав на кнопку, вы примете желаемое значение, как и вы. После этого вы можете использовать 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');
});

Примечание что если вы фильтруете более одного раза, вам также нужно будет включить способ удаления класса hide, если вы ранее фильтровали что-то еще. Таким образом, вы просто добавили бы

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

, чтобы удалить класс скрытия, если элемент фильтра был ранее отфильтрован.

Редактировать:

Поскольку это множественный выбор, я сначала применил бы класс hide к каждому элементу, затем l oop через выбранные значения и удалил 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 2

Выберите все строки 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 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"); 
    })
  )
}

Вам нужно добавить класс к вашему CSS с display:none для .hidden

Множественный выбор значений: { ссылка }

jQuery each(): https://api.jquery.com/each/#each -функция