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

对于这个搜素框，我们为了更好的体验可以利用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. LCLFramework框架 1.1 Pre-Alpha 源码公布

    使用开发框架的好处:1.框架在技术上为软件系统提供了完整的模式实践2.框架为团队提供了合理可行的软件开发过程模式3.框架的应用大大提高了团队的开发效率,团队只需要关注与领域相关的业务实现,而无需关注具 ...

  2. java模拟开锁

    java模拟开锁 service qq:928900200 Introduction to Computer Science II: CSCI142Fall 2014Lab #1Instructor: ...

  3. Swift 关键字汇总

    常见的关键字有以下4种 与声明有关的关键字:class.deinit.enum.extension.func.import.init.let.protocol.static.struct.subscr ...

  4. friend class

    友元函数与友元类.   C++中以关键字friend声明友元关系.友元可以访问与其有friend关系的类中的私有成员.友元包括友元函数和友元类.   编辑本段1．友元函数 如果在本类以外的其它地方定义 ...

  5. Linux设备驱动剖析之Input（四）

    static void input_pass_event(struct input_dev *dev, unsigned int type, unsigned int code, int value) ...

  6. HTML5新特性之WebRTC

    1.概述 WebRTC是“网络实时通信”(Web Real Time Communication)的缩写,它主要用来让浏览器实时获取和交换视频.音频和数据. WebRTC共分三个API. MediaS ...

  7. Foundation和UIKit框架组织图

    转自:http://fantom.iteye.com/blog/1776558

  8. C++中文件按行读取和逐词读取 backup

    http://blog.csdn.net/zhangchao3322218/article/details/7930857 #include  <iostream>#include  &l ...

  9. ACE代码编辑器，代码提示，添加自定义数据

    //设置自动提示代码 var setCompleteData = function(data) { var langTools = ace.require("ace/ext/language ...

  10. 泊松回归(Poisson Regression)

    本博客已经迁往http://www.kemaswill.com/, 博客园这边也会继续更新, 欢迎关注~ Linear Regression预测的目标\(Y\)是连续值, Logistic Regre ...