Use the Select drop-down menu to filter the table table contents:
This section describes how to use the Select drop-down menu to filter the contents of the form, if the amount of data is large enough to facilitate the search use, the filtering effect is very necessary, the code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Author"content= "http://www.softwhy.com/" /><title>Ant Tribe</title><styletype= "Text/css">Table TD{Border:1px solid Black;}</style><Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script><Scripttype= "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(){ varComb=[],children=$( This). Children (); Children.each (function(i) {varvalue=$("select[data-index= '" +I+ "']"). Val (); if(Value== $( This). Text ()||value== "") Comb.push (1); }); returnComb.length!=children.length; }). hide (); }). AppendTo ("Body"); }); $("#example > Tbody tr"). each (function() { $( This). Children (). each (function(i) {var that=$( This); varSelect=$("select[data-index= '" +I+ "']"); if(!Select.children (). Filter (function(){ return $( This). Text ()==That.text (); }). length) {select.append ($ ("<option/>"). Text ($ ( This). Text ())); } }); });}) </Script></Head><Body><TableID= "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>
The above code implements a simple table filtering function, the following describes its implementation process.
A. Code Comment:
1.$. Ready (function () {}), when the document structure is fully loaded, then executes the code in the function.
2.$ ("#example >thead th"). each (function (i) {}), traversing the th element in the table.
3.$ ("<select/>"). attr ("Data-index", I). HTML ($ ("<option/>")). Change (function () {}), Register the Change event handler function for the Select drop-down menu. $ ("<select/>") creates a Select drop-down menu, attr ("Data-index", I), adds and sets Data-index properties and property values for the created Select drop-down menu, HTML ($ ("<option /> ")) to add an empty option item. In fact, two select drop-down menus are created and event handlers are registered.
4.$ ("#example > Tbody > TR"). Show (). filter (function () {}). Hide () to filter the rows of the table. Show () displays all the rows first, then filters through the filter () function, then hides the filter after the left using the Hide () function.
5.var comb=[],children=$ (this). Children (), declares an empty array, just to function as a token, as described below, children=$ (this). Children () Used to get all the cells under the current line.
6.children.each (function (i) {}), which iterates through all the cells of the current row, and I is the index value of the current cell.
7.var value=$ ("select[data-index=" + i + "']"). Val (), gets the value of the current Select drop-down menu, which is the Value property of the selected option item.
8.if (Value = = $ (this). Text () | | value = = "") Comb.push (1) to determine whether the value of the current select is equal to the value of the current cell or whether the value is empty, or append 1 to the array if equal.
9.return comb.length! = Children.length, returns a Boolean value that, if the number of elements in the array is the same as the number of cells, indicates that the current row fully satisfies the filtering of the following two select drop-down menus.
10.appendTo ("Body"), append the Select drop-down menu to the body.
11.$ ("#example > Tbody tr"). each (function () {}), traversing all the TR elements in the tbody in the table.
12.$ (This). Children (). Each (function (i) {}), traversing all TD cells under the current row.
13.var that=$ (this) assigns the index of the current cell to the variable that.
14.var select=$ ("select[data-index=" + i + "']"), gets the Select drop-down menu for the corresponding index.
15.if (!select.children (). Filter (function () {return $ (this). Text () = = That.text ();}). Length) {select.append ("<option/>"). Text ($ (this). Text ())), and determine whether the text content of option in the Select drop-down menu is the same as the contents of the cell, if there is no same , add an option to the Select drop-down menu, where the text is the contents of the current cell.
two. Related reading:
The 1.each () function can be found in thethe each () method of jqueryA chapter.
The 2.attr () function can be found in thejquery's attr () methodA chapter.
The 3.html () function can be found in thejquery's HTML () methodA chapter.
4.change events can be found inthe Change event for jqueryA chapter.
The 5.show () function can be found in thethe Show () method of jqueryA chapter.
The 6.filter () function can be found in thea simple introduction to the use of the filter () function of jqueryA chapter.
The 7.children () function can be found in thejquery's Children () methodA chapter.
The 8.val () function can be found in thethe Val () method of jqueryA chapter.
9.push () functionThe push () method of the JavaScript array objectA chapter.
The 10.append () function can be found in thejquery's Append () methodA chapter.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=13660
For more information, refer to: http://www.softwhy.com/jquery/
Filter table Table contents using the Select drop-down menu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
