对于表格来说，当数据比较多的时候，我们无法一页一页的查找，这时可以通过一个搜索框来实现搜索。

对于这个搜素框，我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选，而不是填完以后点击搜索按钮再执行。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <script src="jquery-1.3.2.min.js"></script>

    <link href="css/style.css" rel="stylesheet" type="text/css" />

    <script>

        $(function () {

            $("tr.parent").click(function () {

                $(this)

                .siblings('.child_'+this.id).toggle();

            });

            $("tr.parent").addClass("selected");

            $("#searchbox").keyup(function () {

                $("table tbody tr").hide()

                .filter(":contains('"+($(this).val())+"')").show();//filter和contains共同来实现了这个功能。

            }).keyup();

        });

    </script>

    <title></title>

</head>

<body>

    <label>筛选</label>

    <input type="text" id="searchbox"/>

    <table>

        <thead>

            <tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>

        </thead>

        <tbody>

            <tr class="parent" id="row_01"><td>前台设计组</td></tr>

            <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>

            <tr class="child_row_01"><td>李山</td><td>男</td><td>湖北</td></tr>

            <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>

            <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>

            <tr class="parent" id="row_02"><td>前台设计组</td></tr>

            <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>

            <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>

            <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>

            <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>

            <tr class="parent" id="row_03"><td>前台设计组</td></tr>

            <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>

            <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>

            <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>

            <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>

        </tbody>

    </table>

</body>

</html>

jquery实现表格内容筛选的更多相关文章

  1. [原创]Jquery实现表格内容点击隐藏显示内容

    1.首先看效果,点击红色字体,可是查看全部文字内容 2.JS实现 思路:将Ajax获得的数据,一份截取,一份不变,放到td里面,分别用span装着. 然后通过display属性,进行切换

  2. js实现前端动态筛选表格内容

    代码参考: http://www.sharejs.com/codes/javascript/4289 http://www.jb51.net/article/103420.htm https://ww ...

  3. jqgrid 表格中筛选条件的多选下拉，树形下拉 ;文本框清除插件;高级查询多条件动态筛选插件[自主开发]

    /** * @@desc 文本框清除按钮,如果isAutoWrap为false当前文本框父级必须是relative定位,boostrap参考input-group * @@author Bear.Ti ...

  4. jQuery对表格的操作及其他应用

    表格操作 1.隔行变色:对普通表格进行隔行换色:单击显示高亮样式:复选框选中高亮 <!DOCTYPE html> <html> <head> <meta ht ...

  5. jQuery对表格的操作

    1.表格变色 (1)普通的隔行变色 CSS代码: .even{background:#fff;}   //偶数行样式 .even{background:#fff;}   //奇数行样式 ①包括表头 $ ...

  6. jquery 表格排序，实时搜索表格内容

    jquery 表格排序,实时搜索表格内容   演示 XML/HTML Code <table class="table-sort"> <thead> < ...

  7. jquery 内容筛选选择器

    基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上 注意事项: :contains与:has都 ...

  8. Jquery操作表格多出一个内容行

    目录 前言 需求 如何监听每一行点击,获取点击id 前后端 问题更新,ajax异步带来的问题 废弃使用HTML拼接 前言 我的前端实在是太差劲了,导致Jquery操作表格多出一个内容行,这个功能我都做 ...

  9. 第七章 jQuery操作表格及其它应用

    1.表格变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org ...

随机推荐

  1. spring之ControllerAdvice注解

    @ControllerAdvice是Spring 3.2新增的注解,主要是用来Controller的一些公共的需求的低侵入性增强提供辅助,作用于@RequestMapping标注的方法上. Contr ...

  2. [译] 二、开始iOS编程之前，你还需要做什么？

    声明:本文翻译自AppCoda网站的文章:What You Need to Begin iOS Programming?,作者是创建者Simon Ng.如有异议,请联系博主.   更新:帖子已经重新被 ...

  3. 《objective-c基础教程》学习笔记（十）—— 内存管理

    本篇博文,将给大家介绍下再Objective-C中如何使用内存管理.一个程序运行的时候,如果不及时的释放没有用的空间内存.那么,程序会越来越臃肿,内存占用量会不断升高.我们在使用的时候,就会感觉很卡, ...

  4. Nginx upstream 长连接

    原文: http://bollaxu.iteye.com/blog/900424 Nginx upstream目前只有短连接,通过HTTP/1.0向后端发起连接,并把请求的"Connecti ...

  5. SAP顾问发展

    关于SAP顾问发展的话题也不仅仅是一次的谈起,但是我想对于自己的规划很多人是否有没有深刻的考虑过.这对于你我来说都非常的重要,那么作为我来说,我仅仅把自己的观点阐述以供大家思考,希望对大家能有所帮助. ...

  6. C# 实现字符串去重

    方法一 注:需要.net 3.5框架的支持 string s = "101,102,103,104,105,101,102,103,104,105,106,107,101,108" ...

  7. asp.net MVC之 自定义过滤器(Filter)

    一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration:缓存的时间,以秒为 ...

  8. 用gameMaker做个小游戏

    看下面这个课程链接,半小时学会 http://study.163.com/course/courseMain.htm?courseId=352004#/courseMain 这是我做的:http:// ...

  9. 暴力清除Android中的短信

    有些短信程序有bug,当短信(特别是彩信)没有接收完整,或者是一些异常情况下,你会收到一条短信但是看不到或者看不了. 此时郁闷的事情就来了,系统会提醒你还有1条未读短信,但是你满世界都找不到这条短信. ...

  10. 互联网金融必须知道：O2O、P2P、MRD、BRD、LBS、PV、UV、KPI、MRD、VP、UED....

    进入互联网的朋友们和身为互联网业内人士,你们知道有多少专业术吗?有时候专业术语也是一种逼格.商业需求文档,市场需求文档,产品需求文档,功能详细说明文档,华丽丽的各种文档你知道吗?用户体验,用户界面,用 ...