你的位置:首页 > Java教程

[Java教程]使用select下拉菜单筛选table表格内容

使用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/