JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tr class="header">
    <td>SN.</td>
    <td>Title</td>
    <td>Date</td>
  </tr>

  <tr>
    <td>
      <input id="sn" type="text" placeholder="Search by SN" />
    </td>
    <td>
      <input id="title" type="text" placeholder="Search by Title" />
    </td>
    <td>
      <input id="date" type="text" placeholder="Search by Date" />
    </td>
  </tr>

  <tr class="fill">
    <td class="sn">RD 254691</td>
    <td class="title">allan</td>
    <td class="ate">29.10.2016</td>
  </tr>

  <tr class="fill">
    <td cs="title">joy</td>
    <td class="ate">29.10.2016</td>
  </tr>

  <tr class="fill">
    <td class="sn">RD 354792</td>
    <td class="title">daisy</td>
    <td class="date">29.10.2016</td>
  </tr>

  <tr class="fill">
    <td class="sn">RD 54692</td>
    <td class="title">scot</td>
    <td class="date">29.10.2016</td>
  </tr>
</table>

JavaScript

$(document).ready(function() {
	  $('#sn').keyup(function() {
	    var searchTerm = $(this).val().replace(/ /g, '').toLowerCase();
	    $(".sn").each(function() {
	      if ($(this).text().replace(/ /g, '').toLowerCase().match(searchTerm)) {
	        $(this).parent().show();
	      } else {
	        $(this).parent().hide();
	      }
	    });
	  });
	  $('#title').keyup(function() {
	    var searchTerm2 = $(this).val().replace(/ /g, '').toLowerCase();
	    $(".title").each(function() {
	      if ($(this).text().replace(/ /g, '').toLowerCase().match(searchTerm2)) {
	        $(this).parent().show();
	      } else {
	        $(this).parent().hide();
	      }
	    });
	  });
	  $('#date').keyup(function() {
	    var searchTerm3 = $(this).val().replace(/ /g, '').toLowerCase();
	    $(".date").each(function() {
	      if ($(this).text().replace(/ /g, '').toLowerCase().match(searchTerm3)) {
	        $(this).parent().show();
	      } else {
	        $(this).parent().hide();
	      }
	    });
	  });
	});