JavaScript控制网页内表格TABLE排序

代码

  1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
  2  < html  xmlns ="http://www.w3.org/1999/xhtml" >  
  3  < head >  
  4  < meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />  
  5  < title > JavaScript控制网页内表格排序 </ title >  
  6  < style >  
  7  * { font-family : Arial, Helvetica, sans-serif ; font-size : 14px ; border : none ; }  
  8  body { text-align : center ; }  
  9  table { margin : 100px auto ; }  
 10  td { width : 100px ; height : 24px ; text-align : center ; line-height : 24px ; border : 1px solid silver ; }  
 11  .red { color : red ; }  
 12  .top { background : #CCCCCC ; cursor : pointer ; }  
 13  .up { background : #FFFFCC url(up.gif) no-repeat right 5px ; }  
 14  .down { background : #FFFFCC url(down.gif) no-repeat right 5px ; }  
 15  .hov { background : #F0EFE5 ; }  
 16  </ style >  
 17  </ head >  
 18  < body >  
 19  < table  cellpadding ="0"  id ="table" >  
 20  < tr  class ="top" >< td > 点击排序 </ td >< td  > 点击排序 </ td >< td > 点击排序 </ td >< td > 点击排序 </ td ></ tr >  
 21  < tr >  
 22  < td >< span  id ="bfn_la_bac.usa" > 15.43 </ span ></ td >  
 23  < td  class ="red" > 700 </ td >  
 24  < td > 1.220 </ td >  
 25  < td  class ="red" > www.corange.cn </ td >  
 26  </ tr >  
 27  < tr >< td >< span  id ="bfn_la_c.usa" > 7.05 </ span ></ td >  
 28  < td  class ="red" > 4 </ td >  
 29  < td > 3,000 </ td >  
 30  < td  class ="red" > asp </ td >  
 31  </ tr >  
 32  < tr >< td >< span  id ="bfn_la_jpm.usa" > 30.62 </ span ></ td >  
 33  < td  class ="red" > 30 </ td >  
 34  < td > 2,558,800 </ td >  
 35  < td  class ="red" > php </ td >  
 36  </ tr >  
 37  < tr >  
 38  < td >< span  id ="bfn_la_axp.usa" > 22.30 </ span ></ td >  
 39  < td  class ="red" > 5 </ td >< td > 6 </ td >  
 40  < td  class ="red" > js </ td >  
 41  </ tr >  
 42  < tr >< td >< span  id ="bfn_la_mrk.usa" > 26.31 </ span ></ td >  
 43  < td  class ="red" > 0.6 </ td >< td > 5 </ td >  
 44  < td  class ="red" > 网站开发 </ td >  
 45  </ tr >  
 46  < tr >< td >< span  id ="bfn_la_pg.usa" > 63.16 </ span ></ td >  
 47  < td  class ="red" > 7 </ td >< td > 4 </ td >  
 48  < td  class ="red" > 子 </ td >  
 49  </ tr >  
 50  </ table >  
 51  < script  type ="text/javascript" >  
 52 
 53  var  tableSort  =   function (){ 
 54  this .initialize.apply( this ,arguments); 
 55  } 
 56 
 57  tableSort.prototype  =  { 
 58 
 59  initialize :  function (tableId,clickRow,startRow,endRow,classUp,classDown,selectClass){ 
 60  this .Table  =  document.getElementById(tableId); 
 61  this .rows  =   this .Table.rows; // 所有行 
 62  this .Tags  =   this .rows[clickRow - 1 ].cells; // 标签td 
 63  this .up  =  classUp; 
 64  this .down  =  classDown; 
 65  this .startRow  =  startRow; 
 66  this .selectClass  =  selectClass; 
 67  this .endRow  =  (endRow  ==   999 ?   this .rows.length : endRow); 
 68  this .T2Arr  =   this ._td2Array(); // 所有受影响的td的二维数组 
 69  this .setShow(); 
 70  }, 
 71  // 设置标签切换 
 72  setShow: function (){ 
 73  var  defaultClass  =   this .Tags[ 0 ].className; 
 74  for ( var  Tag ,i = 0 ;Tag  =   this .Tags[i];i ++ ){ 
 75  Tag.index  =  i; 
 76  addEventListener(Tag , ' click ' , Bind(Tag,statu)); 
 77  } 
 78  var  _this  = this ; 
 79  var  turn  =   0 ; 
 80  function  statu(){ 
 81  for ( var  i = 0 ;i < _this.Tags.length;i ++ ){ 
 82  _this.Tags[i].className  =  defaultClass; 
 83  } 
 84  if (turn == 0 ){ 
 85  addClass( this ,_this.down) 
 86  _this.startArray( 0 , this .index); 
 87  turn = 1 ; 
 88  } else { 
 89  addClass( this ,_this.up) 
 90  _this.startArray( 1 , this .index); 
 91  turn = 0 ; 
 92  } 
 93  } 
 94  }, 
 95  // 设置选中列样式 
 96  colClassSet: function (num,cla){ 
 97  // 得到关联到的td 
 98  for ( var  i =  ( this .startRow - 1 );i < ( this .endRow);i ++ ){ 
 99  for ( var  n = 0 ;n < this .rows[i].cells.length;n ++ ){ 
100  removeClass( this .rows[i].cells[n],cla); 
101  } 
102  addClass( this .rows[i].cells[num],cla); 
103  } 
104  }, 
105  // 开始排序 num 根据第几列排序 aord 逆序还是顺序 
106  startArray: function (aord,num){ 
107  var  afterSort  =   this .sortMethod( this .T2Arr,aord,num); // 排序后的二维数组传到排序方法中去 
108  this .array2Td(num,afterSort); // 输出 
109  }, 
110  // 将受影响的行和列转换成二维数组 
111  _td2Array: function (){ 
112  var  arr = []; 
113  for ( var  i = ( this .startRow - 1 ),l = 0 ;i < ( this .endRow);i ++ ,l ++ ){ 
114  arr[l] = []; 
115  for ( var  n = 0 ;n < this .rows[i].cells.length;n ++ ){ 
116  arr[l].push( this .rows[i].cells[n].innerHTML); 
117  } 
118  } 
119  return  arr; 
120  }, 
121  // 根据排序后的二维数组来输出相应的行和列的 innerHTML 
122  array2Td: function (num,arr){ 
123  this .colClassSet(num, this .selectClass); 
124  for ( var  i =  ( this .startRow - 1 ),l = 0 ;i < ( this .endRow);i ++ ,l ++ ){ 
125  for ( var  n = 0 ;n < this .Tags.length;n ++ ){ 
126  this .rows[i].cells[n].innerHTML  =  arr[l][n]; 
127  } 
128  } 
129  }, 
130  // 传进来一个二维数组，根据二维数组的子项中的w项排序，再返回排序后的二维数组 
131  sortMethod: function (arr,aord,w){ 
132  // var effectCol = this.getColByNum(whichCol); 
133  arr.sort( function (a,b){ 
134  x  =  killHTML(a[w]); 
135  y  =  killHTML(b[w]); 
136  x  =  x.replace( / , / g, '' ); 
137  y  =  y.replace( / , / g, '' ); 
138  switch  (isNaN(x)){ 
139  case   false : 
140  return  Number(x)  -  Number(y); 
141  break ; 
142  case   true : 
143  return  x.localeCompare(y); 
144  break ; 
145  } 
146  }); 
147  arr  =  aord == 0 ? arr:arr.reverse(); 
148  return  arr; 
149  } 
150  } 
151  /* ----------------------------------- */  
152  function  addEventListener(o,type,fn){ 
153  if (o.attachEvent){o.attachEvent( ' on ' + type,fn)} 
154  else   if (o.addEventListener){o.addEventListener(type,fn, false )} 
155  else {o[ ' on ' + type]  =  fn;} 
156  } 
157 
158  function  hasClass(element, className) { 
159  var  reg  =   new  RegExp( ' (\\s|^) ' + className + ' (\\s|$) ' ); 
160  return  element.className.match(reg); 
161  } 
162 
163  function  addClass(element, className) { 
164  if  ( ! this .hasClass(element, className)) 
165  { 
166  element.className  +=   "   " + className; 
167  } 
168  } 
169 
170  function  removeClass(element, className) { 
171  if  (hasClass(element, className)) { 
172  var  reg  =   new  RegExp( ' (\\s|^) ' + className + ' (\\s|$) ' ); 
173  element.className  =  element.className.replace(reg, '   ' ); 
174  } 
175  } 
176 
177  var  Bind  =   function (object, fun) { 
178  return   function () { 
179  return  fun.apply(object, arguments); 
180  } 
181  } 
182  // 去掉所有的html标记 
183  function  killHTML(str){ 
184  return  str.replace( / <[^>]+> / g, "" ); 
185  } 
186  // ------------------------------------------------ 
187  // tableid 第几行是标签行，从第几行开始排序，第几行结束排序(999表示最后) 升序标签样式，降序标签样式 选中列样式 
188  // 注意标签行的class应该是一致的 
189  var  ex1  =   new  tableSort( ' table ' , 1 , 2 , 999 , ' up ' , ' down ' , ' hov ' ); 
190  </ script >  
191 
192 
193  < br >< br >  
194  </ body >  
195  </ html >  

 

http://www.corange.cn//uploadfiles/sorttable2_38545.rar

原文地址: http://www.corange.cn/archives/2010/04/3599.html

转载于:https://www.cnblogs.com/zerogo/archive/2010/04/22/1718211.html