本篇文章只要是對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 >