js 对页面table数据排序

最新推荐文章于 2024-01-31 18:01:15 发布

秀逗的小猫

最新推荐文章于 2024-01-31 18:01:15 发布

阅读量402

点赞数

分类专栏：基础概念文章标签： table date html null

基础概念专栏收录该内容

5 篇文章 0 订阅

订阅专栏

js:

[c-sharp]view plaincopy 
   
 function ieOrFireFox(ob)  
 {  
     if (ob.textContent != null)  
     return ob.textContent;  
     var s = ob.innerText;  
     return s.substring(0, s.length);  
 }  
 //排序 tableId: 表的id,iCol:第几列 ；dataType：iCol对应的列显示数据的数据类型  
 function sortAble(tableId, iCol, dataType) {  
     var table = document.getElementById(tableId);  
     var tbody = table.tBodies[0];  
     var colRows = tbody.rows;  
     var aTrs = new Array;  
          //将将得到的列放入数组，备用  
     for (var i=0; i < colRows.length; i++) {  
         aTrs[i] = colRows[i];  
     }  
                         
                    
     //判断上一次排列的列和现在需要排列的是否同一个。  
     if (table.sortCol == iCol) {  
         aTrs.reverse();  
     } else {  
         //如果不是同一列，使用数组的sort方法，传进排序函数  
         aTrs.sort(compareEle(iCol, dataType));  
     }  
           
     var oFragment = document.createDocumentFragment();  
                   
     for (var i=0; i < aTrs.length; i++) {  
         oFragment.appendChild(aTrs[i]);  
     }                  
     tbody.appendChild(oFragment);  
     //记录最后一次排序的列索引  
     table.sortCol = iCol;  
 }  
 //将列的类型转化成相应的可以排列的数据类型  
 function convert(sValue, dataType) {  
     switch(dataType) {  
     case "int":  
         return parseInt(sValue);  
     case "float":  
         return parseFloat(sValue);  
     case "date":  
         return new Date(Date.parse(sValue));  
     default:  
         return sValue.toString();  
     }  
 }  
               
 //排序函数，iCol表示列索引，dataType表示该列的数据类型  
 function compareEle(iCol, dataType) {  
     return  function (oTR1, oTR2) {  
         var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType);  
         var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType);  
         if (vValue1 < vValue2) {  
             return -1;  
         } else if (vValue1 > vValue2) {  
             return 1;  
         } else {  
             return 0;  
         }  
        };  
 }  

Html

[c-sharp]view plaincopy 
   
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
 <HTML>  
  <HEAD>  
   <TITLE> New Document </TITLE>  
   <mce:script src="D:/IDE/sortable.js" mce_src="D://writeblog.csdn.net/IDE/sortable.js" type="text/javascript"></mce:script>  
  </HEAD>  
  <BODY>  
  <p>Sortable demo:</p>  
         <table border="1" id="tableId">  
             <thead>  
                 <tr>  
                     <th οnclick="sortAble('tableId', 0)"    
                          style="cursor:pointer" mce_style="cursor:pointer">name</th>  
                     <th οnclick="sortAble('tableId', 1, 'date')"  
                          style="cursor:pointer" mce_style="cursor:pointer">Birthday</th>  
                     <th οnclick="sortAble('tableId', 2, 'int')"   
                          style="cursor:pointer" mce_style="cursor:pointer">Age</th>  
                 </tr>  
             </thead>  
             <tbody>  
                 <tr>  
                     <td>Ozone</td>  
                     <td>01/12/1982</td>  
                     <td>25</td>  
                 </tr>  
                 <tr>  
                     <td>OnlyBlue3</td>  
                     <td>10/24/1983</td>  
                     <td>23</td>  
                 </tr>  
                 <tr>  
                     <td>Momo</td>  
                     <td>10/14/1999</td>  
                     <td>8</td>  
                 </tr>  
             </tbody>  
         </table>  
     
  </BODY>  
 </HTML>  

秀逗的小猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 对页面table数据排序

js:[c-sharp] view plaincopyfunction ieOrFireFox(ob) { if (ob.textContent != null) return ob.textContent; var s = ob.innerText; return s.substri
复制链接

扫一扫

专栏目录