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

对于这个搜素框，我们为了更好的体验可以利用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. 统计Codec RAM和ROM方法

    有二种方法,你试一下这个也是我2010-03-29工作日志      2010-03-29: 1) How to accurately get the program memory/Data RAM/ ...

  2. 在线制作h5——上帝的礼物

    在线制作h5 网址:http://www.godgiftgame.com 网站名称:上帝的礼物 推荐指数:5颗星 功能概要 可以设置背景.元素图片.元素文字.元素图形.声音.加载.链接.分享,生成h5 ...

  3. ARCGIS10.1 GeoDatabase深入理解：客户端连接与退出地理数据库时系统表的初始化

    平台软件:ARCIGS10.1 ,SQL Server2008R2 目的:了解客户端在连接arcgis 空间地理数据库后,地理数据库会做些什么样的初始化工作 准备工作: 1.准备好数据库日志文件查看工 ...

  4. 【AI】蒙特卡洛搜索树

    http://jeffbradberry.com/posts/2015/09/intro-to-monte-carlo-tree-search/ 蒙特卡洛方法与随机优化: http://iacs-co ...

  5. [AX2012 R3]关于Alerts

    AX2012提供两种类型的Alert,Change-based alert和Due-date-based alert,前者用于在对新建记录.删除记录.记录的某个指定字段被改变的时候发出提醒,后者则是用 ...

  6. 国行手机安装GOOGLE PLAY

    原文地址:http://blog.sina.com.cn/s/blog_68cff87b0101a96k.html 相信国行的手机都是没有google Play 功能的吧,相比其它国外的手机,功能上逊 ...

  7. 验证 Xcode 是否来自正规渠道

    由于最近的 Xcode Ghost 事件的发生,所以我们有必要在安装完 Xcode 时验证其是否来自正规渠道.   在终端系统上运行以下命令启用检测: spctl --assess --verbose ...

  8. Go语言TCP/UDP Socket编程

    1. TCP编程 TCPClient // TCPClient project main.go package main import ( "fmt" "net" ...

  9. netty 编/解码处理

    1.LineBasedFrameDecoder 1.先找到结束符索引 private static int findEndOfLine(final ByteBuf buffer) { final in ...

  10. 如何复制DataRow（dataTabel中的行）

    由于需要对dataTabel中的行进行上移和下移操作: row 1      行号0 row2       行号1 row3       行号2 例如将row3上移一行,即row2和row3对调位置. ...