Javascript learning notes (11) Sort tables (including values, strings, dates, and other data types)

In the javascript Study Notes (10), we have made some beautification of the table, mainly to achieve the feature of line-by-line color changing and highlighting when the mouse passes through! This looks good, and the user experience is much better than before. In today's study notes, we have improved the table to provide a better user experience. First, SyntaxHighlighter. all ();

In html "target = _ blank> javascript Study Notes (10), we have made some beautification of the table, mainly to achieve the feature of changing the color of the line and highlighting the mouse when it passes through! This looks good, and the user experience is much better than before.
In today's study notes, we have improved the table to provide a better user experience. Let's first look:

Member info table
For example, if we have a table like this, we need to sort the same member group in the member group column so that we need to sort the table. Next we will implement this requirement step by step:
Basic principle: first extract the value of the member group column, store it in an array, and then use arrayObject. the sort () method sorts them. The sorting result is saved in a temporary code segment (documentFragment), and the new sorting result is replaced with the previous cell, finally, the sorting function is implemented.
Javascript code:
View sourceprint? 01 // comparison function for sort sorting

02 function compareTrs (tr1, tr2 ){

03 var value1 = tr1.cells [3]. innerHTML;

04 var value2 = tr2.cells [3]. innerHTML;

05 // var value1 = tr1.cells [3]. firstChild. nodeValue; // you can obtain the values of cells in the Table in either of the following ways:

06 // var value2 = tr2.cells [3]. firstChild. nodeValue;

07 return value1.localeCompare (value2 );

08}

09

10 // sort the table

11 function sortTable (tableId ){

12 var table = document. getElementById (tableId );

13 var tbody = table. tBodies [0];

14 var tr = tbody. rows;

15

16 var trValue = new Array ();

17 for (var I = 0; I

18 trValue [I] = tr [I]; // store the information of each row in the table in the new array.

19}

20

21 trValue. sort (compareTrs); // sort

22

23 var fragment = document. createDocumentFragment (); // creates a code snippet to save the sorted result.

24 for (var I = 0; I

25 fragment. appendChild (trValue [I]);

26}

27

28 tbody. appendChild (fragment); // Replace the sorting result with the previous value.

29}

Then we add Action events in the html code:
View sourceprint? 01

02

03

04

05

06

07

08

09

10

11

12

13 ......

14

15

Member ID	Member name	Email	Member Group	City	Registration Time

See Complete Example 1:
Show sourceview sourceprint? 001

002

003

004Sort table -- by zhangchen

005

054

055