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

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

  if (archive == "archived") {
    $rows.filter(":has(td:nth-child(4):empty)").hide()
  } elseif (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()
  } elseif (entry == "false") {
    $rows.filter(":has(td:nth-child(5):contains('True'))").hide()
  }
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><labelfor="archive">Filter Archive</label><selectid="archive"name="archive"><optionvalue="all">All</option><optionvalue="archived">Archived</option><optionvalue="not-archived">Not Archived</option></select><labelfor="type">Filter Full Entry</label><selectid="type"name="type"><optionvalue="all">All</option><optionvalue="true"selected>True</option><optionvalue="false"selected>False</option></select><tableclass="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);

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

    $rows.hide()                // hide all rows first
      .filter(function() {      // filter out the rows to showif (archiveValue === 'all' && typeValue === 'all') {
        returntrue; // show all rows if no filters selected
      } elseif (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();
  }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><labelfor="archive">Filter Archive</label><selectid="archive"name="archive"><optionvalue="all">All</option><optionvalue="archived">Archived</option><optionvalue="not-archived">Not Archived</option></select><labelfor="type">Filter Full Entry</label><selectid="type"name="type"><optionvalue="all"selected>All</option><optionvalue="true">True</option><optionvalue="false">False</option></select><tableclass="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>