JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<input type="text" onkeyup="onInputChange(event)">
<table id="dataTable">
<thead>
		<tr>
		<th>SNO</th>
		<th>Name</th>
	</tr>
</thead>

<tbody>
	<tr>
		<td>1</td>
		<td class="name">Alpha</td>
	</tr>
	<tr>
		<td>2</td>
		<td class="name">Beta</td>
	</tr>
	<tr>
		<td>3</td>
		<td class="name">Gamma</td>
	</tr>
	</tbody>
</table>

JavaScript

const dataTable = document.getElementById("dataTable");
const trs = dataTable.querySelectorAll('tbody tr');
let display= '';

function onInputChange(event){
const value = event.target.value;

trs.forEach(function(tr){
display = 'table-row';
const tdName = tr.querySelector('.name');
if(tdName.innerText && value && tdName.innerText.toLowerCase().indexOf(value.toLowerCase()) === -1){
	display = 'none';
}
tr.style.display = display;

});
}