js 处理表格排序(中英文)

<! DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.01   Transitional//EN"   
  "http://www.w3.org/TR/html4/loose.dtd" >    
   < html >    
   < head >    
   < title > Sort   table </ title >    
   </ head >    
    
   < script > ...    
  <!--   
  var   flag1,   flag2,   flag3;   
  flag1   =   true;   
  flag2   =   true;   
  flag3   =   true;   
    
  //clear   rows   for   table   
  function   clearAllRows(oTable)...{   
      for(var i=oTable.rows.length-1;i>0;i--)...{   
        oTable.deleteRow(i);   
      }   
  }   

  function   addRows(oTable,  Person)...{   
      var   rowid =   oTable.rows.length;   
      var   row   =   oTable.insertRow(rowid);   
        
      var   cell=row.insertCell();   
      cell.innerText  =  Person.getId();   
        
      var   cell   =   row.insertCell();   
      cell.innerHTML   =   Person.getName();   
        
      var   cell=row.insertCell();   
      cell.innerHTML=Person.getAge();   
  }   


  function   sortBy(index)...{   
      var oTable = document.getElementById("t1");   
      //get   data   from   table   
      var arr = new Array();   
    
      //skip   the   first   row,   because   it   is   the   head   of   the   table   
      for(var i = 1;i < oTable.rows.length; i++)...{   
          var   id   =   oTable.rows[i].cells[0].innerText;   
          var   name =   oTable.rows[i].cells[1].innerText;   
          var   age  =   oTable.rows[i].cells[2].innerText;   
          arr[i - 1]   =   new   Person(id,   name,   age);   
      }   
    
        //process   sort   
      switch(index)...{   
          case   0:   
          if(flag1)...{   
              //sort   ascending   
              arr.sort(function(a,b)...{   
              return   parseInt(a.getId())   -   parseInt(b.getId());   
              });   
              flag1   =   false;   
          }else...{   
              //sort   desc   
              arr.sort(function(a,b)...{   
              return   parseInt(b.getId())   -   parseInt(a.getId());   
              });   
              flag1   =   true;   
          }   
          break;   
          case   1:  
              if(flag2)...{
                arr.sort(function(a,b)...{return a.getName().localeCompare(b.getName());});
                flag2   =   false;   
              }else...{   
                  arr.sort(function(a,b)...{return a.getName().localeCompare(b.getName());});
                  arr.reverse();
                  flag2   =   true; 
              }   
          break;   
          case   2:   
          if(flag3)...{   
              arr.sort(function(a,b)...{   
              return   parseInt(a.getAge()) - parseInt(b.getAge());   
              });   
              flag3   =   false;   
          }else...{   
          arr.sort(function(a,b)...{   
          return   parseInt(b.getAge()) - parseInt(a.getAge());   
          });   
          flag3   =   true;   
          }   
          break;   
      }   
    
  //clear   the   all   rows   except   the   head   of   the   table   
  clearAllRows(oTable);   
    
  //add   the   rows   
  for(var   i   =   0;   i   <   arr.length;   i++)...{   
     addRows(oTable,   arr[i]);   
  }   
    
  }   
  function   Person(id,   name,   age)...{   
      this.id   =   id;   
      this.name   =   name;   
      this.age   =   age;   
  }   
  new   Person('',   '',   '');   
  Person.prototype.getId   = function()   ...{   return   this.id;}   
  Person.prototype.getName = function()   ...{   return   this.name;}   
  Person.prototype.getAge  = function()   ...{   return   this.age;}   
  Person.prototype.toString =  function()   ...{   return   this.name;}   
    
  -->   
   </ script >    
   < body    style ="font-size:12px   " >    
   < table    width ="200"    border ="1"    id ="t1" >    
       < tr >    
           < td >< a    href ="javascript:sortBy(0)" > Id </ a ></ td >    
           < td >< a    href ="javascript:sortBy(1)" > Name </ a ></ td >    
           < td >< a    href ="javascript:sortBy(2)" > Age </ a ></ td >    
       </ tr >    
       < tr >    
           < td > 1 </ td >    
           < td > 语文 </ td >    
           < td > 108 </ td >    
       </ tr >    
       < tr >    
           < td > 2 </ td >    
           < td > 数学 </ td >    
           < td > 40 </ td >    
       </ tr >    
       < tr >    
       < td > 3 </ td >    
           < td > 化学 </ td >    
           < td > 58 </ td >            
       </ tr >    
       < tr >    
           < td > 4 </ td >    
           < td > 地理 </ td >    
           < td > 22 </ td >    
       </ tr >    
   </ table >    
    
   </ body >    
   </ html >    

 

说明 数组默认的排序方法不能按照中文拼音字母顺序排序,这里使用新方法locateCompare进行处理