tinfanide Posted September 9, 2011 Share Posted September 9, 2011 <html> <head> <title>Table Sort Example</title> <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 aTRs = new Array; for (var i=0; i < document.getElementById(sTableID).tBodies[0].rows.length; i++) { aTRs[i] = document.getElementById(sTableID).tBodies[0].rows[i]; } if (document.getElementById(sTableID).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]); } document.getElementById(sTableID).tBodies[0].appendChild(oFragment); document.getElementById(sTableID).sortCol = iCol; } </script> <style> img {width: 75px; height: 75px;} </style> </head> <body> <table border="1" id="tblSort"> <thead> <tr> <th onClick="sortTable('tblSort', 0)" style="cursor:pointer">Type</th> <th onClick="sortTable('tblSort', 1)" style="cursor:pointer">Filename</th> </tr> </thead> <tbody> <tr> <td value="doc"><img src="http://jurajmarek.com/images/doc.png"/></td> <td>My Resume.doc</td> </tr> <tr> <td value="xls"><img src="http://www.deeretalk.com/forums/images/attach/xls.gif"/></td> <td>Fall Budget.xls</td> </tr> <tr> <td value="pdf"><img src="http://images.wikia.com/psychology/images/7/79/Adobepdfreader7_icon.png"/></td> <td>How to be a better programmer.pdf</td> </tr> <tr> <td value="doc"><img src="http://jurajmarek.com/images/doc.png"/></td> <td>My Old Resume.doc</td> </tr> <tr> <td value="txt"><img src="http://after-school2010.com/img/icon_txt.jpg"/></td> <td>Notes from Meeting.txt</td> </tr> <tr> <td value="zip"><img src="http://www.topsofts.com/pop/file-compression/img/winzip1.gif"/></td> <td>Backups.zip</td> </tr> <tr> <td value="xls"><img src="http://www.deeretalk.com/forums/images/attach/xls.gif"/></td> <td>Spring Budget.xls</td> </tr> <tr> <td value="doc"><img src="http://jurajmarek.com/images/doc.png"/></td> <td>Job Description - Web Designer.doc</td> </tr> <tr> <td value="pdf"><img src="http://images.wikia.com/psychology/images/7/79/Adobepdfreader7_icon.png"/></td> <td>Saved Web Page.pdf</td> </tr> <tr> <td value="doc"><img src="http://jurajmarek.com/images/doc.png"/></td> <td>Chapter 1.doc</td> </tr> </tbody> </table> </body></html> oTR1, oTR2I cannot find where they are defined.How're they made to work properly? Link to comment Share on other sites More sharing options...
Ingolme Posted September 9, 2011 Share Posted September 9, 2011 Are you talking about this? return function compareTRs(oTR1, oTR2) { Those are function parameters, they get set when the function is called.The array sort() method passes two elements of the array to a function to be compared, this is the function they're being passed to. Link to comment Share on other sites More sharing options...
tinfanide Posted September 9, 2011 Author Share Posted September 9, 2011 Yes. I didn't understand what the parameters represent. Is this the same to function sortSomething (a,{ return a-b;} And the code below is something like this: 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); } so oTR1/oTR2 must be the table's rows? Link to comment Share on other sites More sharing options...
Ingolme Posted September 9, 2011 Share Posted September 9, 2011 Yes, if you look at the code, you'll see it's generating an array of table cells. It's different than a nodelist because you can use the sort() method among other things. It sorts the array based on the content of the cells. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.