Dom核心之——表格排序

      本例实现点击表头排序的功能：

  1  < html >
  2  < head >
  3  < title > Sort Table Page </ title >
  4  < style  type ="text/css" >
  5      *  { font-family : Tahoma,Arial,serif ; font-size : large ; }
  6      body  { text-align : center ; min-width : 760px ; }
  7      #main  { width : 720px ; margin : 0 auto ; text-align : left ; }
  8      #tbContainer  { text-align : center ; }
  9      p  { border-bottom : 1px dotted #e63 ; }
 10      thead  { background-color : #6495ed ; cursor : pointer ; }
 11      table  {
 12          text-align : center ;
 13          border : 1px solid #4682b4 ;
 14          width : 80% ;
 15          background-color : #4682b4 ;
 16       }
 17      td  { background-color : #fff ; }
 18  </ style >
 19  < script  type ="text/javascript" >
 20       /* 直接使用大于号、小于号进行排序 */
 21       function  comp(a,b) {
 22           return  (a  <  b)  ?   - 1  : ((a  >  b)  ?   1  :  0 );
 23      }
 24 
 25       /* 比较日期时间型数据 */
 26       function  dateComp(a,b) {
 27           var  dtA  =   new  Date(Date.parse(a));  //  解析日期字符串，对象转换为Date
 28           var  dtB  =   new  Date(Date.parse(b));
 29           return  comp(dtA,dtB);
 30      }
 31       /* 比较布尔型数据 */
 32       function  boolComp(a,b) {
 33           //  将a转换为0或者1，分别对应于true和false
 34           if (a  ==   " true " ) a  =   0 ;
 35           else   if (a  ==   " false " ) a  =   1 ;
 36           else   if (a) a  =   0 ;
 37           else  a  =   1 ;
 38 
 39           if (b  ==   " true " ) b  =   0 ;
 40           else   if (b  ==   " false " ) b  =   1 ;
 41           else   if (b) b  =   0 ;
 42           else  b  =   1 ;
 43 
 44           return  comp(a,b);
 45      }
 46 
 47       //  对string对象进行扩展，增加trim方法，用于删除字符串两端的空白
 48      String.prototype.trim  =   function () {
 49           var  re  =   / ^\s+|\s+$ / g;
 50           return   this .replace(re, "" );
 51      }
 52 
 53       function  createComp(col,type,inverse) {
 54          inverse  =  inverse  ||   false ;  //  默认正序排列
 55           //  比较函数，正序排列用
 56           var  compFunc  =   function (trA,trB) {
 57               //  trA中待比较元素值
 58               var  valA  =  trA.cells[col].firstChild.nodeValue.trim();
 59               //  trB中待比较元素值
 60               var  valB  =  trB.cells[col].firstChild.nodeValue.trim();
 61               //  字符串比较
 62               if (type  ==   " string " )  return  valA.localeCompare(valB);
 63               //  日期时间比较
 64               else   if (type  ==   " date " )  return  dateComp(valA,valB);
 65               //  布尔型比较
 66               else   if (type  ==   " boolean " )  return  boolComp(valA,valB);
 67               //  默认情况下比较
 68               else   return  comp(valA,valB);
 69          }
 70           //  正序排列
 71           if ( ! inverse) {
 72               return  compFunc;
 73          }  else  {
 74               //  逆序排序
 75               return   function (trA,trB) {
 76                   return   - compFunc(trA,trB);
 77              }
 78          }
 79      }
 80 
 81       //  全局变量，用于记录当前排序字段和排序方式
 82       var  currentCol, currentReverse;
 83       /* 表格排序 */
 84       function  sort(col,type,reverse) {
 85           var  doReverse;
 86           //  如果再次点击当前排序字段
 87           if (col  ==  currentCol) {
 88              doReverse  =   true ;  //  进行逆序的标志
 89              currentReverse  =   ! currentReverse;  //  记录排序方式
 90          }  else  {
 91              currentReverse  =   false ;  //  默认为正序排序
 92          }
 93           //  记录当前排序的字段
 94          currentCol  =  col;
 95           //  待排序表格
 96           var  tb  =  document.getElementById( " td " );
 97           //  表格行的父节点
 98           var  tbody  =  tb.rows[ 1 ].parentNode;
 99           //  用于保存所有表格行的数组
100           var  allTr  =  [];
101           //  将所有表格行存入数组，第1行为表头，不参与排序
102           for ( var  i  =   1 ; i  <  tb.rows.length; i ++ ) {
103              allTr.push(tb.rows[i]);
104          }
105           if (doReverse) {
106              allTr.reverse();
107          }  else  {
108               //  按指定的字段、数据类型和排序方式进行排序
109              allTr.sort(createComp(col,type,reverse));
110          }
111           //  创建文档片段对象
112           var  frag  =  document.createDocumentFragment();
113           //  将表格行按照排序后的结果保存到文档片段中
114           for ( var  i  =   0 ; i  <  allTr.length; i ++ ) {
115              frag.appendChild(allTr[i]);
116          }
117           //  更新页面的显示
118          tbody.appendChild(frag);
119      }
120  </ script >
121  </ head >
122  < body >
123       < div  id ="main" >
124           < table  id ="td"  cellpadding ="1"  cellspacing ="1"  border ="0" >
125               < thead >
126                   < tr >
127                       < th  onclick ="sort(0,'string')" > 字符串 </ th >
128                       < th  onclick ="sort(1,'number')" > 数字 </ th >
129                       < th  onclick ="sort(2,'date')" > 日期时间 </ th >
130                       < th  onclick ="sort(3,'boolean')" > 布尔型 </ th >
131                   </ tr >
132               </ thead >
133               < tbody >
134                   < tr >
135                       < td > abcde </ td >
136                       < td > 123 </ td >
137                       < td > November 1,1997 10:15 am </ td >
138                       < td > true </ td >
139                   </ tr >
140                   < tr >
141                       < td > bcdef </ td >
142                       < td > 345 </ td >
143                       < td > May 4,2004 9:15 pm </ td >
144                       < td > false </ td >
145                   </ tr >
146                   < tr >
147                       < td > cdefg </ td >
148                       < td > 234 </ td >
149                       < td > July 8,2005 8:10 am </ td >
150                       < td > true </ td >
151                   </ tr >
152                   < tr >
153                       < td > defgh </ td >
154                       < td > 567 </ td >
155                       < td > April 20,2005 4:30 pm </ td >
156                       < td > false </ td >
157                   </ tr >
158                   < tr >
159                       < td > efghi </ td >
160                       < td > 456 </ td >
161                       < td > January 30,2007 6:20 am </ td >
162                       < td > true </ td >
163                   </ tr >
164               </ tbody >
165           </ table >
166       </ div >
167  </ body >
168  </ html >

 

转载于:https://www.cnblogs.com/mikelin/archive/2010/02/19/1669359.html