Home > Developer > JavaScript
This article illustrates the way JavaScript implements table sorting. Share to everyone for your reference. The implementation methods are as follows:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 | <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> table sort </title> <style type=" Text/css "> body {margin:0; font-size:14px; } table,td,th {border:1px solid red;} th {width:100px; background:pink;} table {margin:0 auto;} a {text-decoration: None } </style> <script type= "Text/javascript" > Function sortage () {//Get Table object var tblobj = document.getElementById ("Tbldata"); The row node collection is stored in a temporary array,//Note that there is a reference to the table row node object collection///Subsequent addition of the sorted data back to the table without the need to delete the row node. var rownodes = tblobj.rows; var arrtemp = new Array (); for (var i = 1; i < rownodes.length i++) {arrtemp[i-1] = rownodes[i];} var sortflag = Tblobj.rows[0].cells[1].inne Rtext; Sortflag = Sortflag.charat (sortflag.length-1); Take the last character (↑ expression Ascending, ↓ Express descending) if (Sortflag = "↑") {TBLOBJ.ROWS[0].Cells[1].innerhtml = "<a href= ' javascript:void (0) ' onclick= ' sortage () ' > Age ↓</a>"; for (var i = 0; i < arrtemp.length. i++) {for (var j = i + 1; j < Arrtemp.length; J +) {if parseint (arrtemp[j].ce Lls[1].innertext) < parseint (Arrtemp[i].cells[1].innertext)) {var temp = Arrtemp[i]; Arrtemp[i] = arrtemp[j]; arrTemp [j] = temp; }} else {tblobj.rows[0].cells[1].innerhtml = "<a href= ' javascript:void (0) ' onclick= ' sortage () ' > Age ↑</a> "; for (var i = 0; i < arrtemp.length. i++) {for (var j = i + 1; j < Arrtemp.length; J +) {if parseint (arrtemp[j].ce Lls[1].innertext) > parseint (arrtemp[i].cells[1].innertext)) {var temp = Arrtemp[i]; Arrtemp[i] = arrtemp[j]; arrTemp [j] = temp; ////Add the sorted data back to the table,//Note that there is no need to delete the original row var tbodyobj = tblobj.childnodes[0] Because the reference is stored. for (var i = 0; i < arrtemp.length i++) {tbodyobj.appendchild (arrtemp[i]);} </script> </head> <body> <table id= "tbldata" cellspacing= "0px" cellpadding= "5px" > <tr> <th> name </th> <th><a href= "javascript:void (0)" onclick= "Sortage ()" > Age ↑</a> </th> <th> City </th> </tr> <tr> <td> John </td> <td>25</td> <TD > Beijing </td> </tr> <tr> <td> Dick </td> <td>30</td> <td> Nanchang </td> </tr> <tr> <td> Harry </td> <td>21</td> <td> Zhengzhou </td> </tr> <tr > <td> Li Mo </td> <td>35</td> <td> Tianjin </td> </tr> <tr> <td> Xiaoli < /TD> <td>19</td> <td> shenzhen </td> </tr> <tr> <td> Rocheng </td> <td>23 </td> <td> Shanghai </td> </tr> </table> </body> </html> |
The
wants this article to help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
