Sort table elements using javascript _ javascript skills

This article mainly introduces how to sort table elements by using javascript, including sorting and restoring after clicking, and sorting in ascending or descending order. The complete code is provided at the end of this article, if you are interested, you can see that we can see many sorted items on the Internet, such as size, time, and price.
Now let's try the sorting function:
Sort function code: contains the order-restore, and sort in ascending or descending order after clicking.

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]. inner HTML)> 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 = "▲"; // 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 rows1 [x]. parentNode. appendChild (rows1 [x]);} ageimg. innerHTML = "age limit"} flag =! Flag; loading (); // re-set the color after sorting}

Set the background color code of the table and import the css:

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:

  

  
      Sort.html