jquery通过select列表选择框对表格数据进行过滤示例
2014-05-07 11:49
896 查看
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()));
}
});
});
您可能感兴趣的文章:
- Chosen 基于jquery的选择框插件使用方法
- jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
- 基于JQuery的Select选择框的华丽变身
- 基于jquery实现select选择框内容左右移动添加删除代码分享
- 基于jQuery下拉选择框插件支持单选多选功能代码
- jquery实现select选择框内容左右移动代码分享
- 各种选择框jQuery的选中方法(实例讲解)
- Jquery多选下拉列表插件jquery multiselect功能介绍及使用
- 用jquery实现下拉菜单效果的代码
- 用jquery实现的一个超级简单的下拉菜单
- jQuery模拟12306城市选择框功能简单实现方法示例
相关文章推荐
- 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下拉列表判断是否进行了选项的选择