js表格字段排序

1.比较函数生成器：

/** * 比较函数生成器 * * @param iCol * 数据行数 * @param sDataType * 该行的数据类型 * @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.处理比较字符类型：

/** * 处理排序的字段类型 * * @param sValue * 字段值 默认为字符类型即比较ASCII码 * @param sDataType * 字段类型 对于date只支持格式为mm/dd/yyyy或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.主函数：

 

/** * 通过表头对表列进行排序 * * @param sTableID * 要处理的表ID<table id=''> * @param iCol * 字段列id eg: 0 1 2 3 ... * @param sDataType * 该字段数据类型 int,float,date 缺省情况下当字符串处理 */ 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; }

将以上问代码封装到一个js文件中，在html页面中引用。

 

测试test.html:

 

 

< html xmlns = "http://www.w3.org/1999/xhtml" > < title > 表列排序 </ 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 > 34 </ td > < td > 5/8/2008 </ td > </ tr > < tr > < td > C </ td > < td > 12 </ td > < td > 1/4/2018 </ td > </ tr > </ tbody > </ table > </ body > </ html >