zav,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.2.js'></script>
<style type='text/css'>
body {
font-family: Arial, Helvetica;
font-size: 12px;
}
table {
width: 500px;
}
tr {
height: 20px;
}
.guide {
text-decoration: underline;
text-align: center;
}
.odd {
color: #fff;
background: #666;
}
.even {
color: #666;
}
.hot {
border: 1px solid #f00;
background-color: rgb(220, 220, 220);
color: rgb(0, 0, 255);
padding: 2px;
margin: 2px 1px;
border-radius: 2px;
}
</style>
<script>
$(function() {
$("input#search").on("input", function() {
var val = this.value,
reg = new RegExp("("+val+")", "gi");
$("span.hot").replaceWith(function() {
return this.textContent
});
val && $("tr:not(.guide) td").each(function(i, td) {
$(td).html(function() {
return this.textContent.replace(reg, "<span class='hot'>$1</span>")
})
})
})
});
</script>
</head>
<body>
<input id="search" type="text"></input>
<table>
<tr class="guide">
<td>First Name</td>
<td>Last Name</td>
<td>City</td>
<td>State</td>
</tr>
<tr class="odd">
<td>Manix</td>
<td>Bolton</td>
<td>Merizo</td>
<td>Michigan</td>
</tr>
<tr class="even">
<td>Azalia</td>
<td>Gallegos</td>
<td>Plainfield</td>
<td>Michigan</td>
</tr>
<tr class="odd">
<td>Michael</td>
<td>Shaw</td>
<td>Rawlins</td>
<td>New Hampshire</td>
</tr>
<tr class="even">
<td>Matthew</td>
<td>Parker</td>
<td>Chino Hills</td>
<td>Michigan</td>
</tr>
</table>
</body>
</html>