篇文章主要介紹了js表格排序實例分析(支持int,float,date,string四種數據類型),涉及javascript常用的升序、降序及數據類型轉換等相關技巧,需要的朋友可以參考下
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 <html> <head> <title>SortTable2</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var k=0; /**//************************************************************************** 排序的主方法，有三個形參，STableTd,iCol,sDataType分別為需要排序的表格ID， 需要排序的表格列號，所在列的數據類型（支持int,float,date,string四種數據類型) **************************************************************************/ function sortTable(sTableId,iCol,sDataType) { var oTable=document.getElementById(sTableId);//獲取表格的ID var oTbody=oTable.tBodies[0]; //獲取表格的tbody var colDataRows=oTbody.rows; //獲取tbody裡的所有行的引用 var aTRs=new Array(); //定義aTRs數組用於存放tbody裡的行 for(var i=0;i<colDataRows.length;i++) //依次把所有行放如aTRs數組 { aTRs.push(colDataRows[i]); } /**//*********************************************************************** sortCol屬性是額外給table添加的屬性，用於作順反兩種順序排序時的判斷，區分 首次排序和後面的有序反轉 ************************************************************************/ if(oTable.sortCol==iCol) //非首次排序 { aTRs.reverse(); } else //首次排序 { if(k%2==0) //升序 { aTRs.sort(generateCompareTRs(iCol,sDataType)); } else if(k%2==1) //降序 { aTRs.sort(generateCompareTRs1(iCol,sDataType)); } } var oFragment=document.createDocumentFragment(); //創建文檔碎片 for(var i=0;i<aTRs.length;i++) //把排序過的aTRs數組成員依次添加到文檔碎片 { oFragment.appendChild(aTRs[i]); } oTbody.appendChild(oFragment); //把文檔碎片添加到tbody,完成排序後的顯示更新 oTable.sortCol=iCol; //把當前列號賦值給sortCol,以此來區分首次排序和非首次排序,//sortCol的默認值為-1 }; //比較函數，用於兩項之間的排序 //升序 function generateCompareTRs(iCol,sDataType) { return function compareTRs(oTR1,oTR2) { var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType); var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType); if(vValue1<vValue2) { return -1; } else if(vValue1>vValue2) { return 1; } else { return 0; } }; }; //降序 function generateCompareTRs1(iCol,sDataType) { return function compareTRs(oTR1,oTR2) { var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType); var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType); if(vValue1>vValue2) { return -1; } else if(vValue1<vValue2) { return 1; } else { return 0; } }; }; //數據類型轉換函數 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(); } }; </script> </head> <body> <form name="f1" id="f1" action="" method="post"> <table border="1" id="tblSort" sortCol="-1"> <thead> <tr> <th onClick="sortTable('tblSort',0);" style="cursor:pointer">Last Name</th> <th onClick="sortTable('tblSort',1)" style="cursor:pointer">First Name</th> <th onClick="sortTable('tblSort',2,'date')" style="cursor:pointer">Birthday</th> <th onClick="sortTable('tblSort',3,'int')" style="cursor:pointer">Silbings</th> </tr> </thead> <tbody> <tr> <td>Simth</td> <td>John</td> <td>7/12/1978</td> <td>50nGy/h</td> </tr> <tr> <td>Johnson</td> <td>Betty</td> <td>5/12/1965</td> <td>20nGy/h</td> </tr> <tr> <td>Henderson</td> <td>Nathan</td> <td>10/15/1977</td> <td>130nGy/h</td> </tr> <tr> <td>Willianms</td> <td>James</td> <td>2/25/1949</td> <td>10nGy/h</td> </tr> <tr> <td>Gilliam</td> <td>Michael</td> <td>7/8/1980</td> <td>140nGy/h</td> </tr> <tr> <td>Walker</td> <td>Matthew</td> <td>6/18/1981</td> <td>103nGy/h</td> </tr> </tbody> </table> </form> </body> </html>希望本文所述對大家的javascript程序設計有所幫助。