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 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
一段效率很高的for循环语句使用方法
Aug 13 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 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学习笔记之面向对象编程
2012/12/29 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
Javascript window对象详解
2014/11/12 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
python分析作业提交情况
2017/11/22 Python
TensorFlow如何实现反向传播
2018/02/06 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Django中信号signals的简单使用方法
2019/07/04 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
python手写均值滤波
2020/02/19 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
小学少先队活动方案
2014/02/18 职场文书
《春晓》教学反思
2014/04/20 职场文书
校长创先争优承诺书
2014/08/30 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
委托书格式要求
2015/01/28 职场文书
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
详解Go语言中Get/Post请求测试
2022/06/01 Golang
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS