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排序后: