Applying Filter to HTML Table

Use JQuery :contains to apply filter to HTML Table

by Emmanuel Umozurike

HTML

<button id="myButton1">Click Me</button>
<table>
  <tbody>
    <tr>
      <th>S/N</th>
      <th>Product</th>
      <th>Quantity</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Apple</td>
      <td>20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Orange</td>
      <td>31</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Guava</td>
      <td>16</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Apple</td>
      <td>11</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Banana</td>
      <td>34</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Apple</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 250px;
  margin: 5px;
}

th {
  background-color: maroon;
  color: white;
  font-size: 10px;
  text-align: center;
}

td {
  background-color: white;
  color: black;
  font-size: 10px;
  text-align: center;
}

JavaScript

$("#myButton1").click(function() {
  $('tr').css('display', 'none');
  $('tr:has("th")').show();
  $(":has(td:contains('Apple'))").show();
});