js表格字段排序的實例代碼介紹

 本篇文章只要是對js表格字段排序的實例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助

1.比較函數生成器：    代碼如下: /**  * 比較函數生成器  *   * @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;         }     }; }   2.處理比較字符類型：  代碼如下: /**  * 處理排序的字段類型  *   * @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();     } }   3.主函數：  代碼如下: /**  * 通過表頭對表列進行排序  *   * @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; }   將以上問代碼封裝到一個js文件中，在html頁面中引用。    測試test.html:     代碼如下: < 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 > </ table > </ body > </ html >