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 相关文章推荐
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
使用js获取身份证年龄的示例代码
Dec 11 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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
10个实用的PHP代码片段
2011/09/02 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
php实现的递归提成方案实例
2015/11/14 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
解放web程序员的输入验证
2006/10/06 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
React实现todolist功能
2020/12/28 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
python快排算法详解
2019/03/04 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
解决c++调用python中文乱码问题
2020/07/29 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
python如何写个俄罗斯方块
2020/11/06 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
幼儿园母亲节活动方案
2014/03/10 职场文书
爽歪歪广告词
2014/03/20 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
市级文明单位申报材料
2014/05/07 职场文书
个人专业技术总结
2015/03/05 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
警示教育观后感
2015/06/17 职场文书
运输公司工作总结
2015/08/11 职场文书