JS implements table field sorting_javascript skills-JS Tutorial-php.cn

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 >
 

Related labels：

js Table sorting

Previous article：A simple example of js implementing ID number verification_javascript skills Next article：A simple example of super simple JS two-level and multi-level linkage_javascript skills

Statement of this Website

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