The main idea of this implementation is: Get the column number of the head cell with the mouse click, traverse the data row, get the html in each & lt; tr & gt;, and get each & lt; the tr & gt; tag corresponds to the content in the & lt; td & gt; tag of the obtained column number, and obtains the type attribute value of the & lt; th & gt; tag, you may want to know that there are many Jquery plug-ins on the front-end for table sorting, and they also have powerful functions. For example, Jquery Data Tables is quite powerful in Table processing and can sort Tables, search, paging, and other operations, but have not carefully studied its implementation principles.
In order to better understand the principle of table sorting at the front end and to further learn Jquery, we decided to use Jquery to implement a small function of table sorting.
The main idea of this implementation is: Get the column number of the head cell with the mouse click, traverse the data row, and get eachTo obtainLabel corresponding to the obtained column numberLabel and obtainThe type attribute value of the tag.Html,Content andConcatenate the type property value of to a string to add it to the array, and then add the tableAll html values in are left blank. Different methods are usedTo sort the array Based on the comparison results, and then assign the sorted array elements to. If the column has been sorted, the array is put upside down. Provides sorting rules for values, strings, and IP addresses. String sorting rules use the localeCompare method of javascript. This method supports sorting of Chinese character strings. Unfortunately, this method is not compatible with Google's browser. Therefore, the sorting results of Chinese character strings on Google Chrome are incorrect.
HTML code list:
The Code is as follows:
View Code
Table sorting
