Как я могу использовать jQuery для фильтрации таблицы?

Question

Я застрял, пытаясь реализовать настраиваемый пользователем фильтр для таблицы, используя jQuery (в coffeescript).

Я аннотировал каждую строку в моей таблице с помощью класса CSS, который определяет ее категорию и бренд:

<table id="items_list">
  <tr>
    <th>Foo</th> 
    ... <!-- 6 header columns -->
  </tr>
  <tr class="category-12 brand-37">
    <td>...</td>
  </tr>
  <tr class="category-17 brand-4">
    <td>...</td>
  </tr>

У меня есть <select> выпадающий список всех категорий, поэтому я попытался подключить его к событию onChange, чтобы отфильтровать только те строки в таблице, которые соответствуют идентификатору этой категории. Вот что я получил до сих пор - он выполняется каждый раз, когда я меняю категорию, но selected_records всегда равен нулю.

jQuery -> 
  items = $("#items-list").html()  # works - though it has a <tbody> around it
  $('#category_id').change ->      # gets the onChange for the category dropdown
    category_id = $('#category_id :selected').val() # this works, I get the id
    # this next line always returns null
    selected_records = $(items).filter("tr[class=category-#{category_id}]").html()
    $('#items_list').html(selected_records)

Эта вторая последняя строка должна быть неправильной, но я не могу понять, почему. Есть идеи?

Answer 1

Вам не нужно получать html и манипулировать им.Вы можете просто показать / скрыть элементы tr внутри table.Также вы можете просто использовать this.val(), чтобы получить выбранное значение элемента select внутри обработчика событий change.Попробуйте это.

  var items = $("#items-list tr")
  $('#category_id').change(function(){
      //First hide all the trs
      //then filter trs based on category-id class and show them
      items.hide().filter(".category-" + $(this).val()).show();
  });