JSFiddle - React, Tailwind, and code Playground

HTML

<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<table id="myTable" class="test1" 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>
		<tr>
			<td>Mario Andretti</td>
			<td>Formula One</td>
			<td>Italy</td>
		</tr>
	</tbody>
</table>

CSS

table{margin:50px;border:1px solid #bbb;}
th,td{padding:2px 5px;}
th{background:#555;color:#ccc;}

JavaScript

$(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
            console.log( $(this).val())
            $("table tbody>tr").hide();
            var term=
            $("td").filter(function(){
                   return $(this).text().toLowerCase().indexOf(term ) >-1
            }).parent("tr").show();
		} else {
			// When no input or clean again, show everything
			$("tbody>tr").show();
		}
	});
});