首先引入jquery.js
js代码:
<script type="text/javascript">
$(function(){
$("#filterName").keyup(function(){ //filterName是文本框的id
$("table tbody tr")
.hide()
.filter(":contains('"+( $(this).val() )+"')")
.show();
}).keyup();
})
</script>
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>
<tr><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr><td>找六</td><td>男</td><td>浙江温州</td></tr>
<tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
<tr><td>王六</td><td>男</td><td>浙江杭州</td></tr>
<tr><td>李字</td><td>女</td><td>浙江杭州</td></tr>
<tr><td>李四</td><td>男</td><td>湖南长沙</td></tr>
</tbody>
</table>
当前页面,随意筛选,很好很强大啊!
分享到:
相关推荐
这个"jquery-easyui 例子"压缩包包含了完整的示例,旨在确保你能直观地看到各种功能的实际效果。 EasyUI 提供了诸如对话框(Dialog)、表格(Grid)、表单(Form)、菜单(Menu)、树形结构(Tree)、下拉选择器...
本示例聚焦于“jQuery带筛选的垂直导航菜单展开收缩代码”,这是一个结合了筛选功能和动态展开/收缩效果的菜单设计。下面将详细解释这个主题中的关键知识点。 1. **jQuery库**:jQuery是一个广泛使用的JavaScript库...
《jQuery商品筛选导航菜单在购物网站中的应用》 在当今的电子商务时代,商品筛选功能已成为购物网站不可或缺的一部分,它能够帮助用户快速定位到符合自己需求的商品。jQuery作为一款广泛使用的JavaScript库,以其...
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!
这个“jQuery经典例子大全”集合了多种实用示例,涵盖了jQuery的核心功能和常见应用场景,以下将对其中的关键知识点进行详细解析。 1. **选择器(Selectors)** jQuery的选择器允许我们高效地选取DOM元素。例如,`...
在IT行业中,jQuery是一种广泛使用的JavaScript库,它简化了HTML文档遍历、...总的来说,这个"jQuery带筛选功能垂直导航代码"是一个实用的资源,对于希望提升网站导航功能的开发者来说,是一个值得学习和参考的例子。
- **表格(Grid)**:用于展示数据,支持排序、分页、筛选、编辑等功能。 - **面板(Panel)**:提供内容容器,可以包含其他组件,常用于布局和内容展示。 - **下拉菜单(Menu)**:用于创建级联或展开式的菜单结构。 ...
2. **DataGrid(数据网格)**: DataGrid是展示表格数据的强大工具,支持排序、分页、筛选和编辑等功能。通过与后台数据源(如Ajax)交互,DataGrid可以动态加载和更新数据。在Demo中,你会学习到如何定义列、处理...
总的来说,这个压缩包中的例子展示了如何利用jQuery实现多条件筛选特效,包括HTML布局、jQuery选择器和事件绑定、数据过滤以及动画效果的运用。通过学习和实践这个示例,开发者可以更好地掌握jQuery在实际项目中的...
这个小例子提供了使用 jQuery Grid 的完整环境,包括必要的 JavaScript 和 CSS 文件,以及 UI 和主题相关的资源。 **一、jQuery Grid 基本概念** 1. **数据网格**: 数据网格是一种可视化控件,用于展示和管理大量...
标题“Jquery dataTable完整例子(取数据、分页、样式等)”和描述表明,我们将讨论如何利用这个插件实现数据的获取、分页、排序和搜索功能,并且将看到一个具体的实例,帮助理解如何与JSON数据进行交互。...
`DataTables` 提供了内置的列过滤功能,用户可以在列头输入关键字进行快速筛选。此外,还可以通过`search`选项全局搜索数据,或者使用`column().search()`方法对特定列进行过滤。 **5. 样式与定制** `DataTables` ...
在本文中,我们将深入探讨如何使用jQuery实现一个功能丰富的用户界面元素:点击按钮后,右侧展开全屏遮罩,并提供课程筛选功能。这个功能在现代Web应用中非常常见,能够提供用户友好的交互体验,特别是在展示大量...
这样的功能通常包括单元格编辑、公式计算、数据排序、筛选以及表格样式控制等,使得用户可以在浏览器中体验类似电子表格的操作。 在描述中提到的“源代码和例子”,意味着这个压缩包可能包含了一系列的示例文件和...
这个"26个jQuery经典例子"集合提供了一系列实用的代码片段,可以帮助开发者快速理解和应用jQuery的核心功能。以下是这些例子中可能涵盖的关键知识点: 1. **选择器**:jQuery的选择器类似于CSS,用于选取DOM元素。...
总的来说,"jquery省市县三级联动的三个例子"为我们提供了实现此类功能的多种思路和实践,可以根据项目需求和自身技术水平选择合适的实现方式。无论选择哪个例子,理解其实现原理并能灵活运用到自己的项目中,都是...
在这个实例中,我们使用jQuery库,它提供了丰富的DOM操作和事件处理功能,使我们可以轻松地实现动态筛选。 在HTML结构中,我们有一个`<input>`元素作为搜索框,用户可以在其中输入关键词进行筛选。表格包含多个`...
本示例中的"jQuery文本框input输入关键字自动补全筛选代码"是利用jQuery实现的一种常见用户体验增强功能,通常用于网站的搜索框,当用户在文本框中输入关键词时,系统会实时显示与输入关键词匹配的相关建议,提升...
这个“jquery小例子关于常用函数的认识”涵盖了jQuery的核心功能,是学习jQuery的好材料。下面,我们将深入探讨jQuery的一些关键知识点。 1. **选择器**:jQuery的选择器类似于CSS,用于选取页面上的元素。例如,`$...
本实例"jquery实现的左右选择的例子"是利用jQuery创建的一个功能组件,它提供了用户友好的界面,允许用户在左右两个面板之间选择和移动条目,适用于多种场景,如数据筛选、选项选择等。 这个组件的核心知识点包括:...