JSFiddle - React, Tailwind, and code Playground

by Anu Vidhya

HTML

<div class="tables"> <p> <label for="search"> <strong>Enter keyword to search </strong> </label> <input type="text" id="search"/> <label>e.g. bar, parking, tv</label> </p> <table width="100%" id="tblData" class="target" bgcolor="#ACAAFC">
<tbody></tbody>

JavaScript

$(document).ready(function()
{
	$('#search').keyup(function()
	{
		searchTable($(this).val());
	});
  $('#tblData').append('<tr> <td class="even">12</td> <td class="even">Saurabh Mountview</td> <td class="even">Doctor, Free Parking</td> </tr><tr> <td class="odd">9875621</td> <td class="even">akv</td> <td class="odd">Cofee Shop</td> </tr>');
});
 
function searchTable(inputVal)
{
	var table = $('#tblData');
	table.find('tr').each(function(index, row)
	{
		var allCells = $(row).find('td');
		if(allCells.length > 0)
		{
			var found = false;
			allCells.each(function(index, td)
			{
				var regExp = new RegExp(inputVal, 'i');
				if(regExp.test($(td).text()))
				{
					found = true;
					return false;
				}
			});
			if(found == true)$(row).show();else $(row).hide();
		}
	});
}