您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

js表格字段排序的实例代码介绍

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 本篇文章只要是对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 >