使用select下拉菜单筛选table表格内容:
本章节介绍一下如何利用select下拉菜单对表单的内容进行筛选，如果数据量庞大，便于搜索使用的话，筛选效果还是非常有必要的，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
table td{
border:1px solid black;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#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()));
}
});
});
})
</script>
</head>
<body>
<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>
</div>
</body>
</html>
以上代码实现了简单的表格筛选功能，下面就介绍一下它的实现过程。
一.代码注释:
1.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
2.$("#example>thead th").each(function(i){})，遍历表格中的th元素。
3.$("<select/>").attr("data-index",i).html($("<option/>")).change(function(){})，为select下拉菜单注册change事件处理函数。$("<select/>")创建一个select下拉菜单，attr("data-index",i)，为创建的select下拉菜单添加和设置data-index属性和属性值，html($("<option/>"))添加一个空的option项。这里其实创建了两个select下拉菜单，并注册事件处理函数。
4.$("#example > tbody > tr").show().filter(function(){}).hide()，过滤表格的行。show()首先显示所有的行，然后再通过filter()函数进行过滤，左后将过滤后行使用hide()函数隐藏。
5.var comb=[],children=$(this).children()，声明一个空数组，只是用来作用为一个标记而已，下面会有介绍，children=$(this).children()用来获取当前行下所有的单元格。
6.children.each(function(i){})，遍历当前行的所有单元格，i是当前单元格的索引值。
7.var value=$("select[data-index=‘" + i + "‘]").val()，获取当前select下拉菜单的值，也就是选中的option项的value属性值。
8.if(value == $(this).text() || value == "") comb.push(1)，判断当前select的值是否和当前单元格的值相等或者值是否为空，如果相等则将1追加到数组。
9.return comb.length != children.length，返回一个布尔值，如果数组中元素的数目和单元格的数目相同，那么就表示当前行完全满足下面两个select下拉菜单的筛选。
10.appendTo("body")，将select下拉菜单追加到body中。
11.$("#example > tbody tr").each(function(){})，遍历表格中tbody中的所有tr元素。
12.$(this).children().each(function(i){})，遍历当前行下的所有td单元格。
13.var that=$(this)，将当前单元格的索引赋值给变量that。
14.var select=$("select[data-index=‘" + i + "‘]")，获取对应索引的select下拉菜单。
15.if(!select.children().filter(function(){return $(this).text() == that.text();}).length){select.append($("<option />").text($(this).text()));}，判断select下拉菜单中option的文本内容是否和单元格的内容相同，如果没有相同的，就给select下拉菜单添加一个option项，文本内容就是当前单元格的内容。
二.相关阅读:
1.each()函数可以参阅jQuery的each()方法一章节。
2.attr()函数可以参阅jQuery的attr()方法一章节。
3.html()函数可以参阅jQuery的html()方法一章节。
4.change事件可以参阅jQuery的change事件一章节。
5.show()函数可以参阅jQuery的show()方法一章节。
6.filter()函数可以参阅jQuery的filter()函数用法简单介绍一章节。
7.children()函数可以参阅jQuery的children()方法一章节。
8.val()函数可以参阅jQuery的val()方法一章节。
9.push()函数javascript的Array对象的push()方法一章节。
10.append()函数可以参阅jQuery的append()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13660
更多内容可以参阅:http://www.softwhy.com/jquery/