jquery通过select列表选择框对表格数据进行过滤示例


Posted in Javascript onMay 07, 2014

jquery通过select列表选择框对表格数据进行过滤

表格数据

<table id="example">
    <thead>
        <tr>
            <th>Name</th>
            <th>Surname</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Michael</td>
            <td>Jordan</td>
        </tr>
        <tr>
            <td>Michael</td>
            <td>Jackson</td>
        </tr>
        <tr>
            <td>Bruno</td>
            <td>Mars</td>
        </tr>
    </tbody>
</table>

 JS过滤代码,其中select是动态生成的
 

 $("#example > thead th").each(function(i) {
    $("<select />").attr("data-index", i).html($("<option />")).change(function() {
        $("#example > tbody > tr").show().filter(function() {
            var comb = [], children = $(this).children();
            children.each(function(i) {
                var value = $("select[data-index='" + i + "']").val();
                if (value == $(this).text() || value == "") comb.push(1);
            });
            return comb.length != children.length;
        }).hide();
    }).appendTo("body");
});
$("#example > tbody tr").each(function() {
    $(this).children().each(function(i) {
        var that = $(this);
        var select = $("select[data-index='" + i + "']");
        if (!select.children().filter(function() {
            return $(this).text() == that.text();
        }).length) {
            select.append($("<option />").text($(this).text()));
        }
    });
});
 
Javascript 相关文章推荐
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
关闭时刷新父窗口两种方法
May 07 #Javascript
js获取下拉列表的值和元素个数示例
May 07 #Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 #Javascript
table行随鼠标移动变色示例
May 07 #Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 #Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 #Javascript
js获取select默认选中的Option并不是当前选中值
May 07 #Javascript
You might like
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Python实现的简单hangman游戏实例
2015/06/28 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
python中xlutils库用法浅析
2020/12/29 Python
乌克兰香水和化妆品网站:Notino.ua
2018/03/26 全球购物
生产班组长岗位职责
2014/01/05 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
幼师自我鉴定
2014/02/01 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
杜甫草堂导游词
2015/02/03 职场文书
通知函的格式
2015/04/27 职场文书
民事二审代理词
2015/05/25 职场文书
就业证明函
2015/06/17 职场文书
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android