Tip: You can modify some of the code before running
<!doctype html> <ptml> <pead> <meta charset= "Utf-8"/> <meta http-equiv= "x-ua-compatible" Content= "ie=7" > <meta name= "description" content= "simple sort function" > <meta name= "keywords" content= "simple sort function" > <link href= "Css/style.css" rel= "stylesheet" > <title> simple sort function </title> <style type= "Text/css" > # sort{width:600px; margin:50px Auto; table{margin-top:20px; text-align:center; border:1px solid #ccc;} td{width:90px; height:30px font:14px/30px SimSun;} </style> <script> window.onload = function () {var o Table = document.getElementById (' table '); var oUp = document.getElementById (' Up '); var odown = document.getElementById (' Down '); var Oupword = document.getElementById (' Upword '); var Odownword = document.getElementById (' Downword '); var arow = otable.tbodies[0].rows; /* by serial number/Oup.onclick = function () {tabsort (' up ', 0, ' num '); }; Odown.onclick = function () {tabsort (' down ', 0, ' num '); }; /* by name/Oupword.onclick = function () {tabsort (' Up ', 1, ' word '); }; Odownword.onclick = function () {tabsort (' down ', 1, ' word '); }; function Tabsort (Upordown, col, type) {//upordown: Ascending or descending, col: sorted by that column value, type: var arr=[sorted by number or kanji]; for (var i = 0; i < arow.length; i++) {arr[i]=arow[i]; } arr.sort (function (Row1, row2) {var S1 = row1.cells[col].innerhtml; var s2 = row2.cells[col].innerhtml; if (type = = ' num ') {//Sort number return Upordown = ' up '? S1-s2:s2-s1; }else{//Sort kanji return upordown = = ' up '? S1.localecompare (S2): S2.localecompare (S1); } }); for (var i = 0; i < arow.length i++) {otable.tbodies[0].appendchild (arr[i)); }; } </script> </pead> <body> <div class= "Container cls" > <div id= "Sort" > <table id= "Table" border= "1" cellpadding= "0" cellspacing= "0" > <thead> <tr> <td> serial number ↑↓ </td><td> name ↑↓</td> <td> age </td> <td> sex </td> <td> location </td& Gt </tr> </thead> <tbody> <tr> <td>6</td> <td& gt; Li Liu </td> <td>19</td> <td> man </td> <td> Shanghai </td> </tr> <tr> <td>3</td> <td> John </td> <td>22< /TD> <td> men </td> <td> Nanjing </td> </tr> <tr> & lt;td>2</td> <td>Amy</td> <td>18</td> <td> Women </td> <td> Shanghai </td> </tr> <tr> <td>4</td> <td> Dick </td> <td>19</td> <td> women </td> <td> Shanghai </td> &L T;/tr> <tr> <td>8</td> <td> Little Red </td> <td>22</td> <td> Women </td> <td> Shanghai </td> </tr> <tr> <td>9</ td> <td> Xiaolan </td> <td>19</td> <td> women </td> <TD&G t; Beijing </td> </tr> <tr> <td>1</td> <td>Jim</td> <td>20</td> <td> men </td> <td> Beijing </td> </tr> <tr> <td>10</td> <td>John</td> <td>18</td> <td> men </td> <td> Shanghai </td> </tr> <tr> <td>5</ Td> <td> five </td> <td>24</td> <td> man </td> <TD&G t; Beijing </td></tr> <tr> <td>7</td> <td> xiaoming </td> <td>20</ Td> <td> men </td> <td> Nanjing </td> </tr> </tbody> &L t;/table> </div> </div> </body> </ptml></td> </tr> </table>
Tip: You can modify some of the code before running