JS to achieve the foreground data format sorting

1. Compare function Generators:

Copy CodeThe code is as follows:
/**
* Comparison Function generator
*
* @param icol
* Number of data rows
* @param sdatatype
* The data type of the row
* @return
*/
function Generatecomparetrs (Icol, Sdatatype) {
return function Comparetrs (oTR1, oTR2) {
vValue1 = Convert (Otr1.cells[icol].firstchild.nodevalue, sdatatype);
VValue2 = Convert (Otr2.cells[icol].firstchild.nodevalue, sdatatype);
if (VValue1 < vValue2) {
return-1;
} else if (VValue1 > VValue2) {
return 1;
} else {
return 0;
}
};
}

2. Handling Comparison character types:
Copy CodeThe code is as follows:
/**
* Processing of sorted field types
*
* @param svalue
* The field value defaults to the character type that compares the ASCII code
* @param sdatatype
* field type is only supported for date format mm/dd/yyyy or mmmm dd,yyyy (January 12,2004)
* @return
*/
function convert (svalue, Sdatatype) {
Switch (sdatatype) {
Case "int":
return parseint (svalue);
Case "float":
return parsefloat (svalue);
Case "Date":
return new Date (Date.parse (svalue));
Default:
return svalue.tostring ();
}
}

3. Main function:
Copy CodeThe code is as follows:
/**
* Sort table columns by table header
*
* @param Stableid
* Table to be processed id<table id= ' >
* @param icol
* Field Column ID eg:0 1 2 3 ...
* @param sdatatype
* The field data type Int,float,date by default when string processing
*/
function sorttable (Stableid, Icol, Sdatatype) {
var otable = document.getElementById (Stableid);
var otbody = otable.tbodies[0];
var coldatarows = otbody.rows;
var aTRs = new Array;
for (var i = 0; i < coldatarows.length; i++) {
Atrs[i] = coldatarows[i];
}
if (Otable.sortcol = = Icol) {
Atrs.reverse ();
} else {
Atrs.sort (Generatecomparetrs (Icol, Sdatatype));
}
var ofragment = document.createdocumentfragment ();
for (var j = 0; J < Atrs.length; J + +) {
Ofragment.appendchild (Atrs[j]);
}
Otbody.appendchild (ofragment);
Otable.sortcol = Icol;
}

Encapsulate the above asked code in a JS file, referenced in an HTML page.

Test test.html:

Copy CodeThe code is as follows:
< html xmlns = "http://www.w3.org/1999/xhtml" >
< title > table column sort </title >
< script type = "Text/javascript" src = "js/sorttable.js" > </script >
< BODY >
< table border = "1" id = "Tblsort" >
< THEAD style = "color:red; Bgcolor:blank ">
< tr >
< th onclick = "sorttable (' Tblsort ', 0);" style = "Cursor:pointer" > LastName </th >
< th onclick = "sorttable (' Tblsort ', 1, ' int ');" style = "Cursor:pointer" > number </th >
< th onclick = "sorttable (' Tblsort ', 2, ' Date ');" style = "Cursor:pointer" > Date </th >
</TR >
</thead >
< tbody >
< tr >
< td > A </td >
< td > 1 </td >
< td > 5/9/2008 </td >
</TR >
< tr >
< td > B </td >
< td > 3 </td >
< td > 6/9/2008 </td >
</TR >
< tr >
< td > D </td >
< td > 6 </td >
< td > 5/4/2008 </td >
</TR >
< tr >
< td > E </td >
< td >-5 </td >
< td > 5/4/2007 </td >
</TR >
< tr >
< td > H </td >
< td > </td >
< td > 5/8/2008 </td >
</TR >
< tr >
< td > C </td >
< td > </td >
< td > 1/4/2018 </td >
</TR >
</tbody >
</table >
</Body >
</HTML >

JS to achieve the foreground data format sorting