jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<label for="archive">Filter Archive</label>
<select id="archive" name="archive">
  <option value="all">All</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
</select>

<label for="type">Filter Full Entry</label>
<select id="type" name="type">
  <option value="all">All</option>
  <option value="one">One (only)</option>
  <option value="two">Two (only)</option>
  <option value="three">Three (only)</option>
  <option value="four">Four</option>
  <!--
  <option value="five">Five</option>
  <option value="six">Six</option>
  <option value="seven">Seven</option>
  -->
</select>

<input type="text" id="search" name="search" maxlength="20" placeholder="Search" />

<br/ <br />

<table class="table" style="width: 30%" id="filter">
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
      <th style="background-color:#4c8653;">Employer</th>
      <th>Five</th>
      <th style="background-color:#4c8653;">Entry 6</th>
      <th style="background-color:#4c8653;">Entry 7</th>
      <th style="background-color:#4c8653;">Entry 8</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>One</td>
      <td>5</td>
      <td>Y</td>
      <td>N</td>
      <td>N</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>Two</td>
      <td>5</td>
      <td>N</td>
      <td>Y</td>
      <td>Y</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>Two</td>
      <td>5</td>
      <td>N</td>
      <td>Y</td>
      <td>Y</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>Two</td>
      <td>5</td>
      <td>N</td>
      <td>Y</td>
      <td>Y</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
      <td>6</td>
      <td>Three</td>
      <td>5</td>
      <td>Y</td>
      <td>Y</td>
      <td>Y</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
     ...

CSS

th {
  text-align: left;
}

select {
  margin-right: 20px;
}

#search {
  background-image: none;
  padding: 2px;
  border: 3px solid #ccc;
  border-radius: 2px;
  color: #3c3c3c;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}

JavaScript

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

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

  $rows.filter(function() {
    return $(this).find('td:nth-child(4)').text().toLowerCase() !== archive.toLowerCase();
  }).hide();

  /* if (archive == "one") {
   $rows.filter(":has(td:nth-child(4):contains('Two'))").hide()
   $rows.filter(":has(td:nth-child(4):contains('Three'))").hide()
    } else if (archive == "two") {
   $rows.filter(":has(td:nth-child(4):contains('One'))").hide()
   $rows.filter(":has(td:nth-child(4):contains('Three'))").hide()
    } else if (archive == "three") {
   $rows.filter(":has(td:nth-child(4):contains('One'))").hide()
   $rows.filter(":has(td:nth-child(4):contains('Two'))").hide()
    } */

  if (entry == "one") {

    $rows.filter(":has(td:nth-child(6):contains('N'))").hide()
    $rows.filter(":has(td:nth-child(7):contains('Y'))").hide()
    $rows.filter(":has(td:nth-child(8):contains('Y'))").hide()

  } else if (entry == "two") {

    $rows.filter(":has(td:nth-child(6):contains('Y'))").hide()
    $rows.filter(":has(td:nth-child(7):contains('Y'))").hide()
    $rows.filter(":has(td:nth-child(8):contains('N'))").hide()

  } else if (entry == "three") {

    $rows.filter(":has(td:nth-child(6):contains('Y'))").hide()
    $rows.filter(":has(td:nth-child(7):contains('N'))").hide()
    $rows.filter(":has(td:nth-child(8):contains('Y'))").hide()

  } else if (entry == "four") {

    $rows.filter(":has(td:nth-child(6):contains('N'))").hide()
    $rows.filter(":has(td:nth-child(7):contains('Y'))").hide()
    $rows.filter(":has(td:nth-child(8):contains('N'))").hide()

  }

  return $rows.filter(':visible');
}

// SEARCH INPUT
$("#search").on("keyup", function() {
  var value = $(this).val();
  const rows = filterTable($('#archive').val(), $('#type').val());

  rows.each(function() {
    $row = $(this);

    var id =...