表格排序

 表格排序的HTML代碼可以如下格式編寫：

 

<table border="1" id="tblSort"> <thead> <th onclick="sortTable('tblSort',0)" style="cursor:pointer" mce_style="cursor:pointer">Last Name</th> <th onclick="sortTable('tblSort',1,'int')" style="cursor:pointer" mce_style="cursor:pointer">age</th> <th onclick="sortTable('tblSort',2,'data')" style="cursor:pointer" mce_style="cursor:pointer">Birthday</th> <th onclick="sortTable('tblSort',3,'float')" style="cursor:pointer" mce_style="cursor:pointer">Score</th> </thead> <tbody> ...... </tbody> </table>

 

表格排序代碼如下：

 

function generateCompareTRs(iColIndex,sDataType){ return function compareTRs(oTR1,oTR2){ var vValue1 = convert(oTR1.cells[iColIndex].firstChild.nodeValue,sDataType); var vValue2 = convert(oTR2.cells[iColIndex].firstChild.nodeValue,sDataType); if(vValue1 < vValue2){ return -1; } else if(vValue1 > vValue2){ retrun 1; } else{ return 0; } } } function sortTable(sTableID,iColIndex,sDataType){ //sDataType:int float date or nothing 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 == iColIndex){ aTRs.reverse(); } else{ aTRs.sort(generateCompareTRs(iColIndex,sDataType)); } var oFragment = document.createDocumentFragment(); for(var i=0;i<aTRs.length;i++){ oFragment.appendChild(aTRs[i]); } oTBody.appendChild(oFragment); oTable.sortCol = iColIndex; }

 

如果表格中包含特殊列，特殊列無法按td中的內容排序時，可以爲td制定額外的屬性如：

    <td value="blue"><img src="blue.gif"/></td>

這時可以修改generateCompareTRs完成稿件表格排序。

 

function generateCompareTRs(iColIndex,sDataType){ return function compareTRs(oTR1,oTR2){ var vValue1，vValue2; if(oTR1.cells[iColIndex].getAttribute("value")){ vValue1 = convert(oTR1.cells[iColIndex].getAttribute("value"),sDataType); vValue2 = convert(oTR2.cells[iColIndex].getAttribute("value"),sDataType); } else{ vValue1 = convert(oTR1.cells[iColIndex].firstChild.nodeValue,sDataType); vValue2 = convert(oTR2.cells[iColIndex].firstChild.nodeValue,sDataType); } if(vValue1 < vValue2){ return -1; } else if(vValue1 > vValue2){ retrun 1; } else{ return 0; } } }