JSFiddle - React, Tailwind, and code Playground
by Juan Muñoz
HTML
<table>
<thead>
<th>Unique ID</th>
<th>Random ID</th>
</thead>
<tbody>
<tr>
<td>214215</td>
<td>juan</td>
</tr>
<tr>
<td>1252512</td>
<td>556</td>
</tr>
<tr>
<td>2114</td>
<td>9</td>
</tr>
<tr>
<td>324.546.6</td>
<td>jirafa</td>
</tr>
<tr>
<td>24111</td>
<td>54364</td>
</tr>
</tbody>
</table>
<br />
<input type="text" id="search" placeholder=" live search"></input>
CSS
table, tr, td, th {
border: 1px solid blue;
padding: 2px;
}
table th {
background-color: #999999;
}
JavaScript
$("#search").keyup(function () {
var value = this.value.toLowerCase().trim();http://jsfiddle.net/juangui182/1wLLrcgq/#run
$("table tr").each(function (index) {
if (!index) return;
$(this).find("td").each(function () {
var id = $(this).text().toLowerCase().trim();
var not_found = (id.indexOf(value) == -1);
$(this).closest('tr').toggle(!not_found);
return not_found;
});
});
});