Highlight text in html table
HTML
<table>
<thead>
<tr>
<td>ID</td>
<td>Unique ID</td>
<td>Random ID</td>
<td>Random Name</td>
</tr>
</thead>
<tbody>
<tr>
<td>0341</td>
<td>214215</td>
<td>442</td>
<td>Aditya</td>
</tr>
<tr>
<td>4548</td>
<td>1252512</td>
<td>756</td>
<td>Pankaj</td>
</tr>
</tbody>
</table>
<input type="text" id="search" placeholder=" live search"></input>
CSS
table, th {
border: 1px solid blue;
padding: 2px;
}
table th {
background-color: #999999;
}
em {
background-color: yellow
}
JavaScript
$("#search").on("keyup", function () {
var value = $(this).val().trim();
$("table tr").each(function (index) {
if (index !== 0) {
$row = $(this);
var v = $(this).find('td');
for (var i = 0; i <= v.length; i++) {
var searchValue = $(this).find('td:contains(' + value + ')').eq(i);
if (searchValue.text()) {
console.log("Entered "+ searchValue.text());
searchValue.css('background', 'red');
}
if (!searchValue.text()) {
searchValue.css('background', '');
}
if ($('#search').val() === "") {
$(this).find('td').css('background', '');
}
}
}
});
});