Home  >  Article  >  Web Front-end  >  JS implements table field sorting_javascript skills

JS implements table field sorting_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:59:351136browse

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 < vValue2) {
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 < 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 code into a js file and reference it in the html page.

Test test.html:

Copy code The code is as follows:

< html xmlns = "http://www.w3.org/1999/xhtml" >
< title > Table column sorting
< script type = "text/javascript" src = "js/sortTable.js" >
< body >
< table border = "1" id = "tblSort" >
< thead style = " color: red; bgcolor: blank" >
                                                              th onclick = " sortTable('tblSort',2,'date');" style = "cursor: pointer" > Date


                                                                                                       ;
                                                   td > 5/9/2008
;
< ; td > 3
                                                    < td > D
< ;/ tr >
                                                               ​         < td > 5/4/2007
                                                          < td > 34
                                                                      < ; td > C
; td > 12
< / tr >






Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn