`
dada_fangfang
  • 浏览: 146249 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jquery的筛选功能例子

阅读更多
首先引入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 例子

    这个"jquery-easyui 例子"压缩包包含了完整的示例,旨在确保你能直观地看到各种功能的实际效果。 EasyUI 提供了诸如对话框(Dialog)、表格(Grid)、表单(Form)、菜单(Menu)、树形结构(Tree)、下拉选择器...

    jQuery带筛选的垂直导航菜单展开收缩代码

    本示例聚焦于“jQuery带筛选的垂直导航菜单展开收缩代码”,这是一个结合了筛选功能和动态展开/收缩效果的菜单设计。下面将详细解释这个主题中的关键知识点。 1. **jQuery库**:jQuery是一个广泛使用的JavaScript库...

    jquery商品筛选导航菜单

    《jQuery商品筛选导航菜单在购物网站中的应用》 在当今的电子商务时代,商品筛选功能已成为购物网站不可或缺的一部分,它能够帮助用户快速定位到符合自己需求的商品。jQuery作为一款广泛使用的JavaScript库,以其...

    Jquery dataTable完整例子(分页,带文档)

    jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!

    jQuery经典例子大全

    这个“jQuery经典例子大全”集合了多种实用示例,涵盖了jQuery的核心功能和常见应用场景,以下将对其中的关键知识点进行详细解析。 1. **选择器(Selectors)** jQuery的选择器允许我们高效地选取DOM元素。例如,`...

    jQuery带筛选功能垂直导航代码.zip

    在IT行业中,jQuery是一种广泛使用的JavaScript库,它简化了HTML文档遍历、...总的来说,这个"jQuery带筛选功能垂直导航代码"是一个实用的资源,对于希望提升网站导航功能的开发者来说,是一个值得学习和参考的例子。

    jquery.easyui例子(Demo)含有许多easyui库以及css样式

    - **表格(Grid)**:用于展示数据,支持排序、分页、筛选、编辑等功能。 - **面板(Panel)**:提供内容容器,可以包含其他组件,常用于布局和内容展示。 - **下拉菜单(Menu)**:用于创建级联或展开式的菜单结构。 ...

    Jquery EasyUI Demo 例子

    2. **DataGrid(数据网格)**: DataGrid是展示表格数据的强大工具,支持排序、分页、筛选和编辑等功能。通过与后台数据源(如Ajax)交互,DataGrid可以动态加载和更新数据。在Demo中,你会学习到如何定义列、处理...

    jquery实现多条件筛选特效

    总的来说,这个压缩包中的例子展示了如何利用jQuery实现多条件筛选特效,包括HTML布局、jQuery选择器和事件绑定、数据过滤以及动画效果的运用。通过学习和实践这个示例,开发者可以更好地掌握jQuery在实际项目中的...

    JQuery Grid 例子

    这个小例子提供了使用 jQuery Grid 的完整环境,包括必要的 JavaScript 和 CSS 文件,以及 UI 和主题相关的资源。 **一、jQuery Grid 基本概念** 1. **数据网格**: 数据网格是一种可视化控件,用于展示和管理大量...

    Jquery dataTable完整例子(取数据、分页、样式等)

    标题“Jquery dataTable完整例子(取数据、分页、样式等)”和描述表明,我们将讨论如何利用这个插件实现数据的获取、分页、排序和搜索功能,并且将看到一个具体的实例,帮助理解如何与JSON数据进行交互。...

    Jquery dataTable完整例子下载(取数据、分页、样式等)

    `DataTables` 提供了内置的列过滤功能,用户可以在列头输入关键字进行快速筛选。此外,还可以通过`search`选项全局搜索数据,或者使用`column().search()`方法对特定列进行过滤。 **5. 样式与定制** `DataTables` ...

    jQuery点击按钮右侧展开全屏遮罩并带课程筛选功能

    在本文中,我们将深入探讨如何使用jQuery实现一个功能丰富的用户界面元素:点击按钮后,右侧展开全屏遮罩,并提供课程筛选功能。这个功能在现代Web应用中非常常见,能够提供用户友好的交互体验,特别是在展示大量...

    通过jQuery实现Excel风格web应用功能

    这样的功能通常包括单元格编辑、公式计算、数据排序、筛选以及表格样式控制等,使得用户可以在浏览器中体验类似电子表格的操作。 在描述中提到的“源代码和例子”,意味着这个压缩包可能包含了一系列的示例文件和...

    26个jquery经典例子

    这个"26个jQuery经典例子"集合提供了一系列实用的代码片段,可以帮助开发者快速理解和应用jQuery的核心功能。以下是这些例子中可能涵盖的关键知识点: 1. **选择器**:jQuery的选择器类似于CSS,用于选取DOM元素。...

    jquery省市县三级联动的三个例子

    总的来说,"jquery省市县三级联动的三个例子"为我们提供了实现此类功能的多种思路和实践,可以根据项目需求和自身技术水平选择合适的实现方式。无论选择哪个例子,理解其实现原理并能灵活运用到自己的项目中,都是...

    基于jquery实现表格内容筛选功能实例解析

    在这个实例中,我们使用jQuery库,它提供了丰富的DOM操作和事件处理功能,使我们可以轻松地实现动态筛选。 在HTML结构中,我们有一个`&lt;input&gt;`元素作为搜索框,用户可以在其中输入关键词进行筛选。表格包含多个`...

    jQuery文本框input输入关键字自动补全筛选代码

    本示例中的"jQuery文本框input输入关键字自动补全筛选代码"是利用jQuery实现的一种常见用户体验增强功能,通常用于网站的搜索框,当用户在文本框中输入关键词时,系统会实时显示与输入关键词匹配的相关建议,提升...

    jquery小例子关于常用函数的认识

    这个“jquery小例子关于常用函数的认识”涵盖了jQuery的核心功能,是学习jQuery的好材料。下面,我们将深入探讨jQuery的一些关键知识点。 1. **选择器**:jQuery的选择器类似于CSS,用于选取页面上的元素。例如,`$...

    jquery实现的左右选择的例子

    本实例"jquery实现的左右选择的例子"是利用jQuery创建的一个功能组件,它提供了用户友好的界面,允许用户在左右两个面板之间选择和移动条目,适用于多种场景,如数据筛选、选项选择等。 这个组件的核心知识点包括:...

Global site tag (gtag.js) - Google Analytics