JavaScript学习笔记9--表格排序

 这次的例子，只是把Nicholas C .Zakas的例子理解了一下，代码是在学习表格排序时的Demo. 单个数据类型的排序比较简单，他这个例子的特别之处在于能兼容多种数据类型的排序。例子 很简单，但是里面有些设计思想给我启发很大，每次看他的书，都有新的收获。

< html >    < head >      < title > SortTable2 </ title >      < meta  http-equiv ="content-type"  content ="text/html; charset=UTF-8" >      < script  type ="text/javascript" >      /* *************************************************************************     排序的主方法，有三个形参，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 {  // 首次排序       aTRs.sort(generateCompareTRs(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  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 > 2 </ td >           </ tr >           < tr >             < td > Johnson </ td >             < td > Betty </ td >             < td > 5/12/1965 </ td >             < td > 5 </ td >           </ tr >           < tr >             < td > Henderson </ td >             < td > Nathan </ td >             < td > 10/15/1977 </ td >             < td > 3 </ td >           </ tr >           < tr >             < td > Willianms </ td >             < td > James </ td >             < td > 2/25/1949 </ td >             < td > 1 </ td >           </ tr >           < tr >             < td > Gilliam </ td >             < td > Michael </ td >             < td > 7/8/1980 </ td >             < td > 4 </ td >           </ tr >           < tr >             < td > Walker </ td >             < td > Matthew </ td >             < td > 6/18/1981 </ td >             < td > 3 </ td >           </ tr >         </ tbody >            </ table >     </ form >    </ body > </ html >

 

排序前:

按Birthday排序后: