关于jquery表格内容筛选有关问题

关于jquery表格内容筛选问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.a {
border:solid 1px #9c0;
width:800px;
}
.b {
width:100%;
table-layout:fixed;
text-align:center;
color:#FFFFFF;
}
.b thead {
background:#000000;
height:30px;
}
.odd {
background:#400000;
}
.even {
background:#800000;
}
.c {
background:#F00000;
}
.f {
background:#F0F8FF;
padding:5px;
}
</style>
<title>Insert title here</title>
</head>
<body>
<div class="a">
<div class="f"><label for="search">Search:</label>
<input type="text" id="search" size="20"></input>
</div>
<table class="b">
<thead>
<tr><th>name</th><th>sex</th><th>address</th></tr>
</thead>
<tbody>
<tr><td>zhangsan</td><td>man</td><td>dalian</td></tr>
<tr><td>lisi</td><td>man</td><td>dalian</td></tr>
<tr><td>wangwu</td><td>man</td><td>dalian</td></tr>
<tr><td>xiaohong</td><td>man</td><td>dalian</td></tr>
<tr><td>lucy</td><td>man</td><td>dalian</td></tr>
<tr><td>Tom</td><td>man</td><td>dalian</td></tr>
<tr><td>guotao</td><td>man</td><td>dalian</td></tr>
<tr><td>davy</td><td>man</td><td>dalian</td></tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(function(){
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$("#search").keyup(function(){
$("table tbody tr").hide()
.filter(":contains('"+($(this).val())+"')").show();
$("tbody>tr:visible:odd").addClass("odd");
$("tbody>tr:visible:even").addClass("even");

}).keyup();
});
$("tbody>tr").hover(function(){
$(this).addClass("c");
},function(){
$(this).removeClass("c");
});
</script>
</body>
</html>
现在的问题是：我输入小写字母“o”，筛选的内容可以实现隔行显示，但是当我删除“o”时，显示所有表格内容，但是问题出现了：内容已经不是隔行显示的状态了，请大家帮我分析一下：

关于jquery表格内容筛选有关问题

相关推荐