<!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来实现表格列字段的筛选功能，并且会在改变筛选条件时实时更新表格内容。 首先，让我们理解HTML结构。在`index.html`文件中，通常会有一个表格（`<table>`）元素，包含表头（`<thead>`...
在实现表格筛选功能时，我们会用到jQuery的选择器、事件处理和DOM操作等功能。 下面是一个基本的实现步骤： 1. **选择元素**：首先，我们需要选择表格和筛选输入框。例如，如果筛选输入框的ID是`searchInput`，...
在这个“jquery表格排序和筛选表.rar”压缩包中，我们重点关注的是如何利用jQuery来实现表格数据的排序和筛选功能，这对于前端开发来说是十分常见的需求。 首先，让我们了解表格排序。在网页中，表格（`<table>`...
本文将深入探讨如何使用jQuery实现表格的样式美化、表格展开功能以及内容筛选，帮助开发者提升网页交互体验。 一、jQuery实现表格样式 1. **基本样式设置**：jQuery本身并不直接处理CSS样式，但它可以方便地操作...
Tablesorter是一款基于jQuery的开源表格排序插件，它提供了丰富的功能，如表格内容的排序、筛选和分页，极大地增强了HTML表格的交互性和用户体验。本文将深入探讨Tablesorter插件的核心特性以及如何实现表格内容筛选...
《jQuery内容搜索筛选提示代码详解》 在网页开发中，为用户提供快速、高效的搜索功能是提升用户体验的关键之一。"jQuery内容搜索筛选提示代码"正是针对这一需求，利用jQuery库实现的一种高效、便捷的搜索筛选机制。...
**表格筛选**： 1. **搜索框**：在表格上方添加一个输入框，用户可以输入关键词进行筛选。 2. **实时过滤**：监听输入框的`keyup`事件，当用户输入时实时更新表格，只显示匹配的行。 3. **多条件筛选**：允许用户...
本文将深入探讨如何使用 jQuery 和 Bootstrap 实现带分页的表格数据搜索和筛选功能。 首先，Bootstrap 提供了丰富的 CSS 样式和组件，包括表格（Table）样式，使得我们可以轻松创建出响应式的、美观的表格。而 ...
本篇文章将详细讲解如何利用jQuery实现一个高效的表格数据条件筛选功能。 首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理和Ajax交互，使得开发者能够更快速、更简洁地编写代码。在这个案例中...
《jQuery仿Excel表格排序筛选代码实现详解》 在网页开发中，模拟Excel表格的功能，如排序和筛选，能够极大地提高用户交互体验。本篇文章将详细解析"jQuery仿Excel表格排序筛选代码"，帮助开发者理解其背后的实现...
一、jQuery表格筛选 表格筛选功能允许用户通过输入关键词快速查找表格中的特定数据。在jQuery中，可以使用`.filter()`方法配合文本匹配来实现。首先，获取到表格的行元素，然后根据用户输入的关键词过滤行，最后将...
《jQuery表格筛选器详解及其应用》 在网页开发中，数据展示往往涉及到大量的表格内容，如何高效、便捷地对这些信息进行筛选，是提升用户体验的关键。"jQuery表格筛选器"便是一个为此目的而设计的工具，它使得用户...
总结来说，Tablesorter 2.0 是一个功能强大、易于定制的 jQuery 表格插件，它通过排序、筛选和分页功能，极大地提升了用户在处理表格数据时的体验。无论是在大型项目还是小型网页中，Tablesorter 都能为数据展示带来...
《jQuery表格数据条件筛选代码详解》 在网页开发中，数据的展示与处理是一项重要的任务，尤其是当数据量较大时，如何高效地进行筛选和查询显得尤为重要。jQuery，作为一个轻量级的JavaScript库，提供了丰富的功能，...
【原创jQuery表格插件】是一种基于JavaScript库jQuery开发的组件，旨在增强网页中的表格功能，使其具有更丰富的交互性和灵活性。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...
本文将详细探讨"jquery筛选并控制图片排序插件"这一主题，帮助开发者了解如何利用jQuery实现图片的筛选和排序功能，以增强网页的交互性和用户体验。 首先，jQuery提供了一套丰富的选择器，用于高效地选取DOM元素。...
“JQUERY插件，注意安装一下”，这里指的是该项目可能包含一个jQuery插件，用于增强表格筛选功能。jQuery插件通常是扩展jQuery功能的小型JavaScript代码块，它们可以通过$.fn.extend()方法附加到jQuery的核心对象上...
在本文中，我们将深入探讨如何使用jQuery库，特别是jQuery TableSorter.js插件，来实现表格内容的静态排序，从而提升用户体验和数据管理效率。TableSorter.js是jQuery的一个强大扩展，它允许用户通过简单的点击表头...