JS implements table field sorting_javascript skills

1. Comparison function generator:

Copy code The code is as follows:

/* *
* Comparison function generator
*
* @param iCol
* Number of data rows
* @param sDataType
* 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 return -1;
} else if (vVal ue1 > vValue2 ) {
                                                                                                                                                                                                                                       Character type:




Copy code

The code is as follows:

/** * Field type for sorting * * @param sValue * The field value defaults to character type, which is the ASCII code comparison * @param sDataType

* The field type is only for date The supported format is 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 code

The code is as follows:

/** * Sort table columns by table header * * @param sTableID * Table ID to be processed * @param iCol * Field column id eg: 0 1 2 3 ...

* @param sDataType
* The data type of this field is int, float, date. By default, it is processed as a string
*/
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 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 oFragment.appendChild(aTRs[j]);
}
oTBody. appendChild(oFragment);
oTable.sortCol = iCol;
}


Encapsulate the above code into a js file and reference it in the html page.

Test test.html:

Copy code The code is as follows:

Table column sorting title >
script >



                                                              th onclick = " sortTable('tblSort',2,'date');" style = "cursor: pointer" > Date th >
  tr >
  thead >
                                                                                                       ;
                                                   td > 5/9/2008 td >
; tr >
< ; td > 3 td >
                                                     D td >
< ;/ tr >
                                                               ​         5/4/2007 td >
                                                          34 td >
                                                                      < ; td > C td >
; td > 12 td >

tbody >
table >
body >
html >