Filter Table With Dropdown

I have a table and want to filter the last two columns, Archived and Full Entry. The 4th column archived will either have a date or be empty. The 5th column full entry will either

Solution 1:

Your logic is on the right lines, but just incomplete. Also note that the archived column is nth-child(4), not 3, as it's 1-based, not 0-based.

To simplify the logic you can create a function which runs when either of the filter select elements are changed. This function will first show all rows and then hide all those which do not match the filter option chosen, like this:

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

Solution 2:

You could use a filter

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