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

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:

Figure 1 member information table
For example, if we have a table like Figure 1, 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 <tr. length; 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 <trValue. length; 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 <table summary = "user infomation table" id = "tableSort">

02 <thead>

03 <tr>

04 <th> member ID </th>

05 <th> member name </th>

06 <th> email </th>

07 <th onclick = "sortTable (tableSort)" style = "cursor: pointer;"> member group </th>

08 <th> city </th>

09 <th> registration time </th>

10 </tr>

11 </thead>

12 <tbody>

13 ......

14 </tbody>

15 </table>

See Complete Example 1:
Show sourceview sourceprint? 001 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

002

004 <title> sort table -- by zhangchen </title>

005 <style type = "text/css">

006 *{

007 padding: 0;

008 margin: 0;

009}

010

011 body {

012 font-family: verdana;

013 font-size: 12px;

014}

015

016. content {

017 width: 550px;

018 margin: 20px auto;

019}

020

021. content h1 {

022 font-family:;

023 font-size: 18px;

024 padding-bottom: 5px;

025}

026

027 table {

028 width: 100%;

029}

030

031 th, td {

032 padding: 6px 0;

033 text-align: center;

034}

035

036 th {

037 background-color: #007D28;

038 color: # ffffff;

039}

040

041 tr {

042 background-color: # E8FFE8;

043}

044

045. odd {

046 background-color: # FFF3EE;

047}

048

049. highlight {

050 background-color: # FFF3EE;

051}

052

053 </style>

054

055 <script type = "text/javascript">

056

057 // dynamically add class attributes to js

058 function addClass (element, value ){

059 if (! Element. className ){

060 & nbs