UJKJDF,
если ненужно скрытие убрать строки 42 - 44
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.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;
}
tbody tr:nth-of-type(2n + 1) {
color: #fff;
background: #666;
}
tbody tr:nth-of-type(2n) {
color: #666;
}
.hot {
border: 1px solid #f00;
background-color: #FFD480;
color: #000000;
}
</style>
<script>
$(function() {
$("input#search").on("input", function() {
var text = this.value.toLowerCase();
$("tr:not(.guide) td").removeClass("hot").each(function(i, obj) {
if ($(obj).text().toLowerCase().indexOf(text) > -1 && text) $(obj).addClass("hot")
});
$("tr:not(.guide)").show().filter(function() {
return text && !$(".hot", this).length
}).hide()
})
});
</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>
<td>Manix</td>
<td>Bolton</td>
<td>Merizo</td>
<td>Michigan</td>
</tr>
<tr>
<td>Azalia</td>
<td>Gallegos</td>
<td>Plainfield</td>
<td>Michigan</td>
</tr>
<tr>
<td>Michael</td>
<td>Shaw</td>
<td>Rawlins</td>
<td>New Hampshire</td>
</tr>
<tr>
<td>Matthew</td>
<td>Parker</td>
<td>Chino Hills</td>
<td>Michigan</td>
</tr>
</table>
</body>
</html>
.
