jquery通过select列表选择框对表格数据进行过滤示例
2014-05-07 00:00
1246 查看
jquery通过select列表选择框对表格数据进行过滤
表格数据
JS过滤代码,其中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())); } }); });
相关文章推荐
- jquery通过select列表选择框对表格数据进行过滤示例
- JQuery实现Select下拉列表进行状态选择功能
- 思达报表工具Style Report基础教程—用选择列表,选择树进行数据过滤
- jQuery实现Select下拉列表进行状态选择功能
- ajax+jquery+flea+smarty实现了通过选择下拉列表动态显示相应的数据
- jquery完成列表中数据选择,以及进行所选数据的再选择
- jquery取消选择select下拉框示例代码
- gridview 在列表中对信息进行增删改,通过VIEWSTATE进行缓存,然后一次性将数据提交到服务器端。
- jquery通过扩展select控件实现支持enter或focus选择的方法
- 通过JQuery控制Select选择的个数并做出限制
- 页面显示时间日期,通过jquery动态向表格添加数据
- jQuery取得select选择的文本与值的示例
- php/perl/python , 通过thrift 连接 hbase,进行条件过滤选择
- jquery-ajax请求后台数据转换json显示在select下拉列表&&jquery获取下拉列表的值和显示内容的方法
- jQuery的ajax()检验用户名;通过jQuery的load()/get()/post()方法实现;使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- jquery制作select列表双向选择示例代码
- Jquery基本选择器 层次选择器 过滤选择器 表单选择器使用示例 带注释
- jquery+json实现数据列表分页示例代码
- select下拉列表判断是否进行了选项的选择