此例子是javascript高级程序设计里的 放出来心备以后使用。上代码。 <html> <head> <title>Table Sort Example</title> <mce:script type="text/javascript"><!-- 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(); } } function generateCompareTRs(iCol, sDataType) { return function compareTRs(oTR1, oTR2) { var vValue1, vValue2; if (oTR1.cells[iCol].getAttribute("value")) { vValue1 = convert(oTR1.cells[iCol].getAttribute("value"), sDataType); vValue2 = convert(oTR2.cells[iCol].getAttribute("value"), sDataType); } else { 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; } }; } 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 i=0; i < aTRs.length; i++) { oFragment.appendChild(aTRs[i]); } oTBody.appendChild(oFragment); oTable.sortCol = iCol; } // --></mce:script> </head> <body> <p>Click on the table header to sort.</p> <table border="1" id="tblSort"> <thead> <tr> <th οnclick="sortTable('tblSort', 0)" style="cursor:pointer" mce_style="cursor:pointer">Type</th> <th οnclick="sortTable('tblSort', 1)" style="cursor:pointer" mce_style="cursor:pointer">Filename</th> </tr> </thead> <tbody> <tr> <td value="doc"><img src="images/wordicon.gif" mce_src="images/wordicon.gif"/></td> <td>My Resume.doc</td> </tr> <tr> <td value="xls"><img src="images/excelicon.gif" mce_src="images/excelicon.gif"/></td> <td>Fall Budget.xls</td> </tr> <tr> <td value="pdf"><img src="images/acrobaticon.gif" mce_src="images/acrobaticon.gif"/></td> <td>How to be a better programmer.pdf</td> </tr> <tr> <td value="doc"><img src="images/wordicon.gif" mce_src="images/wordicon.gif"/></td> <td>My Old Resume.doc</td> </tr> <tr> <td value="txt"><img src="images/notepadicon.gif" mce_src="images/notepadicon.gif"/></td> <td>Notes from Meeting.txt</td> </tr> <tr> <td value="zip"><img src="images/zippedfoldericon.gif" mce_src="images/zippedfoldericon.gif"/></td> <td>Backups.zip</td> </tr> <tr> <td value="xls"><img src="images/excelicon.gif" mce_src="images/excelicon.gif"/></td> <td>Spring Budget.xls</td> </tr> <tr> <td value="doc"><img src="images/wordicon.gif" mce_src="images/wordicon.gif"/></td> <td>Job Description - Web Designer.doc</td> </tr> <tr> <td value="pdf"><img src="images/acrobaticon.gif" mce_src="images/acrobaticon.gif"/></td> <td>Saved Web Page.pdf</td> </tr> <tr> <td value="doc"><img src="images/wordicon.gif" mce_src="images/wordicon.gif"/></td> <td>Chapter 1.doc</td> </tr> </tbody> </table> </body> </html>