JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<table id="my-table" border="1" style="border-collapse:collapse">
	<thead>
		<tr>
			<th>Name</th>
			<th>Sports</th>
			<th>Country</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Sachin Tendulkar</td>
			<td>Cricket</td>
			<td>India</td>
		</tr>
		<tr>
			<td>Tiger Woods</td>
			<td>Golf</td>
			<td>USA</td>
		</tr>
		<tr>
			<td>Maria Sharapova</td>
			<td>Tennis</td>
			<td>Russia</td>
		</tr>
	</tbody>
</table>

JavaScript

// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> 
$(document).ready(function(){
	// Write on keyup event of keyword input element
	$("#kwd_search").keyup(function(){
		// When value of the input is not blank
        var term=$(this).val()
		if( term != "")
		{
			// Show only matching TR, hide rest of them
			$("#my-table tbody>tr").hide();
            $("#my-table td").filter(function(){
                   return $(this).text().toLowerCase().indexOf(term ) >-1
            }).parent("tr").show();
		}
		else
		{
			// When there is no input or clean again, show everything back
			$("#my-table tbody>tr").show();
		}
	});
});