Use the select drop-down menu to filter table content, selecttable

Use the select drop-down menu to filter table content, selecttable

Use the select drop-down menu to filter table content:
This section describes how to use the select drop-down menu to filter the content of a form. If the data volume is large and easy to search for, the filtering effect is necessary. The code example is as follows:

<! DOCTYPE html> 
The above code implements the simple table filtering function. The following describes the implementation process.
I. Code comments:
1. $ (document). ready (function () {}). When the document structure is fully loaded, run the code in the function.
2. $ ("# example> thead th"). each (function (I) {}) to traverse the th element in the table.
3. $ ("<select/> "). attr ("data-index", i2.16.html ($ ("<option/> ")). change (function () {}), which registers the change event processing function for the select drop-down menu. $ ("<Select/>") create a select drop-down menu, attr ("data-index", I ), add and set data-index attributes and attribute values for the select drop-down menu, and add an empty option for html ($ ("<option/>. Two select drop-down menus are created and the event processing function is registered.
4. $ ("# example> tbody> tr"). show (). filter (function () {}). hide (), filter table rows. Show () first shows all the rows, and then uses the filter () function to filter the rows. After the left, the show () function is used to hide the rows.
5. var comb = [], children = $ (this ). children () declares an empty array and serves as a tag. children = $ (this) is introduced below ). children () is used to obtain all cells in the current row.
6. children. each (function (I) {}) traverses all cells in the current row. I is the index value of the current cell.
7. var value = $ ("select [data-index = '" + I + "']"). val () to obtain the value of the current select drop-down menu, that is, the value Attribute value of the selected option item.
8. if (value = $ (this ). text () | value = "") comb. push (1) to determine whether the current select value is equal to the current cell value or whether the value is null. If it is equal, 1 is appended to the array.
9. return comb. length! = Children. length: return a Boolean value. If the number of elements in the array is the same as the number of cells, the current row completely meets the filtering conditions of the following two select drop-down menus.
10. appendTo ("body") to append the select drop-down menu to the body.
11. $ ("# example> tbody tr"). each (function () {}) to traverse all tr elements in the tbody.
12. $ (this). children (). each (function (I) {}) to traverse all the td cells in the current row.
13. var that = $ (this), assign the index of the current cell to the variable that.
14. var select = $ ("select [data-index = '" + I + "']") to obtain the select drop-down menu of the corresponding index.
15. if (! Select. children (). filter (function () {return $ (this ). text () = that. text ();}). length) {select. append ($ ("<option/> "). text ($ (this ). text () ;}, determine whether the option text in the select drop-down menu is the same as the cell content. If not, add an option item to the select drop-down menu, the text content is the content of the current cell.
Ii. Related reading:
1. For details about the each () function, refer to the each () method section of jQuery.
2. For more information about the attr () function, see the attr () method section of jQuery.
3. For details about the html () function, see the html () method section of jQuery.
4. For details about the change event, see the change event section of jQuery.
5. For more information about the show () function, see the show () method section of jQuery.
6. For more information about the filter () function, see the filter () function usage section of jQuery.
7. For more information about the children () function, see the children () method section of jQuery.
8. For more information about the val () function, see the val () method section of jQuery.
9. The push () method of the Array object of the push () function javascript section.
10. For more information about the append () function, see the append () method section of jQuery.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 13660.
For more information, see: http://www.softwhy.com/jquery/