Sorting of elements in the table in HTML

Sorting of elements in the table in HTML

We can see a lot of data that can be sorted on the Internet, such as size and time.

Now let's try the sorting function:

Sort function code: contains the order after clicking-restore, and sort in ascending or descending order.

 

Function sortAge () {// sort the age. You must first obtain the object of each row, and then sort the first (starting from 0) Size of the object. var tabNode = document. getElementById (tabid); var rows0 = tabNode. rows; var rows1 = []; // copy an element. The first row does not need to be sorted for (var x = 1; x <rows0.length; x ++) {rows1 [x-1] = rows0 [x];} for (var x = 0; x <rows1.length-1; x ++) {// each element is a row object for (var y = x + 1; y <rows1.length; y ++) {// parse the content of each row into a number if (parseInt (rows1 [x]. cells [1]. innerHTML)> parseI Nt (rows1 [y]. cells [1]. innerHTML) {// alert (aa = + x ++: + rows1 [x]. cells [1]. innerHTML); // alert (bb + rows1 [y]. cells [1]. innerHTML); var temp = rows1 [x]; rows1 [x] = rows1 [y]; rows1 [y] = temp ;}}/* sort by clicking, restore the previous status after sorting. if (flag) {for (var x = 0; x <rows1.length; x ++) {// tabNode. childNodes [0]. appendChild (rows [x]); // Method 1: Not necessarily compatible with rows1 [x]. parentNode. appendChild (rows1 [x]) ;}} else {for (var x = 1; x <rows0.length; x ++) {// tab Node. childNodes [0]. appendChild (rows [x]); // Method 1: Not necessarily compatible with rows0 [x]. parentNode. appendChild (rows0 [x]);} flag =! Flag; * // * the difference between the forward and backward display after vertices is the relationship between the forward and backward display after the appendchild. */var ageimg = document. getElementById (ageid); if (flag) {for (var x = 0; x <rows1.length; x ++) {// after sorting, start from 0 // tabNode. childNodes [0]. appendChild (rows [x]); // Method 1: Not necessarily compatible with rows1 [x]. parentNode. appendChild (rows1 [x]);} ageimg. innerHTML = age ▲; // set the above icon} else {for (var x = rows1.length-1; x> = 0; x --) {// tabNode. childNodes [0]. appendChild (rows [x]); // Method 1: Not necessarily compatible with rows 1 [x]. parentNode. appendChild (rows1 [x]);} ageimg. innerHTML = age limit} flag =! Flag; loading (); // re-set the color after sorting}

Set the background color of the table in the "imported css" code:

 

 

Function loading () {var name; var tabNode = document. getElementById (tabid); var rows = tabNode. rows; // get the array object var rowslength = rows for each row. length; // The length of each row for (var x = 1; x
 
  
Css code:
  
 
  
 
  
table td a:hover{   background-color:#0080c0;   }.one{background-color:#80ff00;}.two{background-color:#ff8040;}.three{background-color:#008040;}table{width:500px;height:500px;border:#400040 solid 2px;border-collapse:collapse;}table td,th{border:solid 2px;}table th{background-color:#c0c0c0;}
Before sorting:
  
 
  

  
Ascending Order:
  

  
Descending order:
  

  
Complete code:
  
 
  

  
  <Script type = text/javascript> function loading () {var name; var tabNode = document. getElementById (tabid); var rows = tabNode. rows; // get the array object var rowslength = rows for each row. length; // The length of each row for (var x = 1; x
  
   
ParseInt (rows1 [y]. cells [1]. innerHTML) {// alert (aa = + x ++: + rows1 [x]. cells [1]. innerHTML); // alert (bb + rows1 [y]. cells [1]. innerHTML); var temp = rows1 [x]; rows1 [x] = rows1 [y]; rows1 [y] = temp ;}}/* sort by clicking, restore the previous status after sorting. if (flag) {for (var x = 0; x <rows1.length; x ++) {// tabNode. childNodes [0]. appendChild (rows [x]); // Method 1: Not necessarily compatible with rows1 [x]. parentNode. appendChild (rows1 [x]) ;}} else {for (var x = 1; x <rows0.length; x ++ ){ // TabNode. childNodes [0]. appendChild (rows [x]); // Method 1: Not necessarily compatible with rows0 [x]. parentNode. appendChild (rows0 [x]);} flag =! Flag; * // * the difference between the forward and backward display after vertices is the relationship between the forward and backward display after the appendchild. */var ageimg = document. getElementById (ageid); if (flag) {for (var x = 0; x <rows1.length; x ++) {// after sorting, start from 0 // tabNode. childNodes [0]. appendChild (rows [x]); // Method 1: Not necessarily compatible with rows1 [x]. parentNode. appendChild (rows1 [x]);} ageimg. innerHTML = age ▲; // set the above icon} else {for (var x = rows1.length-1; x> = 0; x --) {// tabNode. childNodes [0]. appendChild (rows [x]); // Method 1: Not necessarily compatible with rows 1 [x]. parentNode. appendChild (rows1 [x]);} ageimg. innerHTML = age limit} flag =! Flag; loading (); // you need to reset the color after sorting.} </script>
   
 

    
  
 
   
 
    
Name
 
    
Age
 
    
Birthplace
 
   
 
   
 
    
Zhang San
 
    
13
 
    
Changsha, Hunan Province
 
   
 
   
 
    
Li Si
 
    
15
 
    
Changde, Hunan Province
 
   
 
   
 
    
Jack
 
    
45
 
    
Hunan Linglong
 
   
 
   
 
    
Wang Hua
 
    
23
 
    
Hangzhou, Zhejiang Province
 
   
 
   
 
    
Zhang Jin
 
    
30
 
    
Anwei Hefei
 
   
 
   
 
    
Comprehensive
 
    
23
 
    
Yiyang, Hunan Province
 
   
 
   
 
    
Yang Ge
 
    
42
 
    
Changde, Hunan Province