js表格字段排序

1.比较函数生成器：

view plain

1. /** 
2.  * 比较函数生成器 
3.  *  
4.  * @param iCol 
5.  *            数据行数 
6.  * @param sDataType 
7.  *            该行的数据类型 
8.  * @return 
9.  */  
10. function  generateCompareTRs(iCol, sDataType) {  
11.      return   function  compareTRs(oTR1, oTR2) {  
12.         vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);  
13.         vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);  
14.          if  (vValue1 < vValue2) {  
15.              return  -1;  
16.         }  else   if  (vValue1 > vValue2) {  
17.              return  1;  
18.         }  else  {  
19.              return  0;  
20.         }  
21.     };  
22. }  

 

2.处理比较字符类型：

view plain

1. /** 
2.  * 处理排序的字段类型 
3.  *  
4.  * @param sValue 
5.  *            字段值 默认为字符类型即比较ASCII码 
6.  * @param sDataType 
7.  *            字段类型 对于date只支持格式为mm/dd/yyyy或mmmm dd,yyyy(January 12,2004) 
8.  * @return 
9.  */  
10. function  convert(sValue, sDataType) {  
11.      switch  (sDataType) {  
12.      case   "int" :  
13.          return  parseInt(sValue);  
14.      case   "float" :  
15.          return  parseFloat(sValue);  
16.      case   "date" :  
17.          return   new  Date(Date.parse(sValue));  
18.      default :  
19.          return  sValue.toString();  
20.     }  
21. }  

 

3.主函数：

 

view plain

1. /** 
2.  * 通过表头对表列进行排序 
3.  *  
4.  * @param sTableID 
5.  *            要处理的表ID<table id=''> 
6.  * @param iCol 
7.  *            字段列id eg: 0 1 2 3 ... 
8.  * @param sDataType 
9.  *            该字段数据类型 int,float,date 缺省情况下当字符串处理 
10.  */  
11. function  sortTable(sTableID, iCol, sDataType) {  
12.      var  oTable = document.getElementById(sTableID);  
13.      var  oTBody = oTable.tBodies[0];  
14.      var  colDataRows = oTBody.rows;  
15.      var  aTRs =  new  Array;  
16.      for  (  var  i = 0; i < colDataRows.length; i++) {  
17.         aTRs[i] = colDataRows[i];  
18.     }  
19.      if  (oTable.sortCol == iCol) {  
20.         aTRs.reverse();  
21.     }  else  {  
22.         aTRs.sort(generateCompareTRs(iCol, sDataType));  
23.     }  
24.      var  oFragment = document.createDocumentFragment();  
25.      for  (  var  j = 0; j < aTRs.length; j++) {  
26.         oFragment.appendChild(aTRs[j]);  
27.     }  
28.     oTBody.appendChild(oFragment);  
29.     oTable.sortCol = iCol;  
30. }  

 

将以上问代码封装到一个js文件中，在html页面中引用。

 

测试test.html:

 

 

view plain

1. < html   xmlns = "http://www.w3.org/1999/xhtml" >  
2. < title > 表列排序 </ title >  
3. < script   type = "text/javascript"   src = "js/sortTable.js" > </ script >  
4. < body >  
5. < table   border = "1"   id = "tblSort" >  
6.      < thead   style = "color: red; bgcolor: blank" >  
7.          < tr >  
8.              < th   onclick = " sortTable('tblSort',0);"   style = "cursor: pointer" > LastName </ th >  
9.              < th   onclick = " sortTable('tblSort',1,'int');"   style = "cursor: pointer" > Number </ th >  
10.              < th   onclick = " sortTable('tblSort',2,'date');"   style = "cursor: pointer" > Date </ th >  
11.          </ tr >  
12.      </ thead >  
13.      < tbody >  
14.          < tr >  
15.              < td > A </ td >  
16.              < td > 1 </ td >  
17.              < td > 5/9/2008 </ td >  
18.          </ tr >  
19.          < tr >  
20.              < td > B </ td >  
21.              < td > 3 </ td >  
22.              < td > 6/9/2008 </ td >  
23.          </ tr >  
24.          < tr >  
25.              < td > D </ td >  
26.              < td > 6 </ td >  
27.              < td > 5/4/2008 </ td >  
28.          </ tr >  
29.          < tr >  
30.              < td > E </ td >  
31.              < td > -5 </ td >  
32.              < td > 5/4/2007 </ td >  
33.          </ tr >  
34.          < tr >  
35.              < td > H </ td >  
36.              < td > 34 </ td >  
37.              < td > 5/8/2008 </ td >  
38.          </ tr >  
39.          < tr >  
40.              < td > C </ td >  
41.              < td > 12 </ td >  
42.              < td > 1/4/2018 </ td >  
43.          </ tr >  
44.      </ tbody >  
45. </ table >  
46. </ body >  
47. </ html >