zav,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<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>
window.addEventListener('DOMContentLoaded', function() {
var input = document.querySelector('#search'),
table = document.querySelector('table'),
td = table.querySelectorAll('tr:nth-child(n+2) td');
input.addEventListener('input', function() {
var val = this.value,
reg = new RegExp("("+val+")", "gi");
[].forEach.call( document.querySelectorAll('span.hot'), function(el) {
el.parentNode.replaceChild(document.createTextNode(el.textContent),el)
});
val && [].forEach.call(td, function(el) {
el.innerHTML = el.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>