JavaScript implementation Table sorting

Table sorter includes JavaScript and a bit of CSS, allowing the original HTML table to be sorted by column data values, respectively.

Effect

1. Click in any column of the table header and the following lines will be sorted in ascending order of this column value
   To determine the order by string comparison
2. Click on the column again to change to a more descending order
3. Click on other columns to reorder the values of other columns
4. Note that when sorting, the background color of the column parity line remains odd white, even light gray

Requirements

1. Cannot change the original HTML, only can add JS and CSS files
2. Cannot use any class library, only native Dom API
3. JavaScript must be modular, and JS's call entry must follow the following diagram:
   

JS Code:

"Use strict"; window.onload = function () {    vartables = Getalltables (); Makealltablessortalbe (tables);};//Embed the words with the following two lines://var tables = Getalltables ();//Makealltablessortalbe (tables); function getalltables() {    returndocument.getElementsByTagName ("Table");} function makealltablessortalbe(tables) {     for(vari =0; i < tables.length; i++) Makesort (Tables[i]);}//Make list sortable function makesort(table) {    varth = Table.getelementsbytagname ("TH"); for(vari =0; i < th.length; i++) {//Bind button eventTh[i].onclick = function () {            varindex =0; Changestyle (Th, This);//Find index value             for(varj =0; J < Th.length; J + +) {if( This= = Th[j]) index = j; } sortbyth (table, Index, This. className);    }; }}//Change style function changestyle(th, T) {     for(vari =0; i < th.length; i++) {if(Th[i] = = t) {if(Th[i].classname.indexof ("Descend") != -1) Th[i].classname = Th[i].classname.replace ("Descend","Ascend");Else if(Th[i].classname.indexof ("Ascend") != -1) Th[i].classname = Th[i].classname.replace ("Ascend","Descend");ElseTh[i].classname + ="Descend"; }Else{th[i].classname = Th[i].classname.replace ("Descend",""); Th[i].classname = Th[i].classname.replace ("Ascend",""); }    }}//Sort function sortbyth(table, Index, className) {    varAction = Classname.indexof ("Descend") != -1?"Descend":"Ascend";vararray = []; for(vari =1; I < Table.getelementsbytagname ("TR"). length; i++) {array[i-1] = Table.getelementsbytagname ("TR") [i]; } array.sort ( function (A, B) {        //Ascending        if(Action = =' descend ') {returna.cells[index].innerhtml <= b.cells[index].innerhtml; }Else{//Descending            returna.cells[index].innerhtml >= b.cells[index].innerhtml; }    }); for(vari =0; i < Array.Length; i++) Table.getelementsbytagname ("Tbody")[0].appendchild (Array[i]);}

Css:

    Border: 1px Solid Gray;margin: 0;padding: 3px;Border-collapse:collapse;}TR: Nth-child (even),TR: Hover {  background-color: #DEDEDE;} th {  text-align: left;     background-color: #041A7F;     color: White;     font-weight: bold;  padding-right: +px; }. Ascend,. Descend {  background-color: #A4B0FC;     background-position: right;  background-repeat: no-repeat; }. Ascend {  background-image: url ("ascend.png");} . Descend {  background-image: url ("descend.png");} 

JavaScript implementation Table sorting