Фильтр таблицы с выпадающим

Question

У меня есть table и я хочу отфильтровать последние два столбца, Archived и Full Entry.4-й столбец архива будет либо иметь дату, либо будет пустым.Полная запись в 5-м столбце будет либо истинной, либо ложной.У меня есть два раскрывающихся списка, логика первого раскрывающегося списка должна:

1. Если выбран вариант Archived, отфильтруйте 4-й столбец, чтобы отображать только строки, в которых 4-й столбец пуст.

2. Если выбрано Не архивировано, отфильтруйте 4-й столбец, чтобы отображать только строки, в которых 4-й столбец не пуст.

3. Если все выбрано, показать все в этом столбце

И

1. Если для второго раскрывающегося списка выбрано значение True, отфильтруйте 5-й столбец, чтобы отображать только те строки, в которых 5-й столбец содержит значение true.

2. .... Если false, отфильтруйте 5-й столбец, где строки равны false ...

3. ... Если все показывают все в 5-м столбце.

Я не могу заставить скрипт работать для Архива.Спасибо за любую помощь

$(function() {
  $('#archive').change(function() {
    if ($(this).val() == "archived") {
      $("#filter").find("td:nth-child(3):not(:empty)")
    } else {
      $("#filter").find("td:nth-child(3):empty")
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="archive">Filter Archive</label>
<select id="archive" name="archive">
  <option value="all">All</option>
  <option value="archived">Archived</option>
  <option value="not-archived">Not Archived</option>
</select>

<label for="type">Filter Full Entry</label>
<select id="type" name="type">
  <option value="all">All</option>
  <option value="true" selected>True</option>
  <option value="false" selected>False</option>
</select>

<table class="table" style="width: 30%" id="filter">
  <thead>
    <tr>
      <th>Ref</th>
      <th>Edit</th>
      <th>Name</th>
      <th>Archived</th>
      <th>Full Entry</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>True</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td></td>
      <td>False</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>6</td>
      <td></td>
      <td>True</td>
    </tr>
  </tbody>
</table>

Answer 1

Вы можете использовать фильтр

$(function() {

  var $archive = $('#archive');
  var $type = $('#type');
  var $rows = $("#filter").find("tbody tr"); // cache this in a var for better performance (unless you have dynamic added rows)

  $archive.change(filterTable);
  $type.change(filterTable);

  function filterTable() {
    var archiveValue = $archive.val();
    var typeValue = $type.val();

    $rows.hide()                // hide all rows first
      .filter(function() {      // filter out the rows to show

      if (archiveValue === 'all' && typeValue === 'all') {
        return true; // show all rows if no filters selected
      } else if (archiveValue === 'all') {
        return $(this).children().eq(4).text().toLowerCase() === typeValue;  // show only matching type filters if archive filters is all
      } else {
        var text = $(this).children().eq(3).text().trim();
        isArchived = archiveValue === 'archived' ? text !== '' : text === ''; 
        if (typeValue === 'all') {
          return isArchived;             // if type filters is all, just show archive filtered contnt
        } else {
          return $(this).children().eq(4).text().toLowerCase() === typeValue && isArchived;  // filter by both archive and type
        }
      }

    }).show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="archive">Filter Archive</label>
<select id="archive" name="archive">
  <option value="all">All</option>
  <option value="archived">Archived</option>
  <option value="not-archived">Not Archived</option>
</select>

<label for="type">Filter Full Entry</label>
<select id="type" name="type">
  <option value="all" selected>All</option>
  <option value="true">True</option>
  <option value="false">False</option>
</select>

<table class="table" style="width: 30%" id="filter">
  <thead>
    <tr>
      <th>Ref</th>
      <th>Edit</th>
      <th>Name</th>
      <th>Archived</th>
      <th>Full Entry</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>True</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td></td>
      <td>False</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>6</td>
      <td></td>
      <td>True</td>
    </tr>
  </tbody>
</table>

Answer 2

Ваша логика на правильных линиях, но просто неполная.Также обратите внимание, что столбец archived равен nth-child(4), а не 3, так как он основан на 1, а не на 0.

Чтобы упростить логику, вы можете создать функцию, которая запускается, когда любой изФильтр select элементы изменены.Эта функция сначала покажет все строки, а затем скроет все те, которые не соответствуют выбранной опции фильтра, например:

$(function() {
  $('#archive, #type').change(function() {
    filterTable($('#archive').val(), $('#type').val());
  });
});

function filterTable(archive, entry) {
  var $rows = $('#filter tbody tr').show();

  if (archive == "archived") {
    $rows.filter(":has(td:nth-child(4):empty)").hide()
  } else if (archive == "not-archived") {
    $rows.filter(":has(td:nth-child(4):not(:empty))").hide()
  }

  if (entry == "true") {
    $rows.filter(":has(td:nth-child(5):contains('False'))").hide()
  } else if (entry == "false") {
    $rows.filter(":has(td:nth-child(5):contains('True'))").hide()
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="archive">Filter Archive</label>
<select id="archive" name="archive">
  <option value="all">All</option>
  <option value="archived">Archived</option>
  <option value="not-archived">Not Archived</option>
</select>

<label for="type">Filter Full Entry</label>
<select id="type" name="type">
  <option value="all">All</option>
  <option value="true" selected>True</option>
  <option value="false" selected>False</option>
</select>

<table class="table" style="width: 30%" id="filter">
  <thead>
    <tr>
      <th>Ref</th>
      <th>Edit</th>
      <th>Name</th>
      <th>Archived</th>
      <th>Full Entry</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>True</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td></td>
      <td>False</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>6</td>
      <td></td>
      <td>True</td>
    </tr>
  </tbody>
</table>