使用select下拉菜单筛选table表格内容
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用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/
以上是关于使用select下拉菜单筛选table表格内容的主要内容，如果未能解决你的问题，请参考以下文章