通過js,根據列對table 排序
阿新 • • 發佈:2019-01-09
js如下
/** * 比較函式生成器 * * @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; } }; } /** * 處理排序的欄位型別 * * @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(); } } /** * 通過表頭對錶列進行排序 * * @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; }
頁面如下:
< 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 > <script type="text/javascript" src="上面js檔案.js"></script> </ body >