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 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
axios学习教程全攻略
Mar 26 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
javascript 设计模式之组合模式原理与应用详解
Apr 08 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
用文本作数据处理
2006/10/09 PHP
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
Javascript常考语句107条收集
2010/03/09 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
全面理解闭包机制
2016/07/11 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Python字符串处理实例详解
2017/05/18 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
提高python代码运行效率的一些建议
2020/09/29 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
教师档案管理制度
2014/01/23 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
人力资源总监工作说明
2014/03/03 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python