JavaScript实现表格排序

 

 

< style  type ="text/css" >
.desc
{
background-image : url(../Images/Desc.gif) ;
background-repeat : no-repeat ;
}
.asc
{
background-image : url(../Images/Asc.gif) ;
background-repeat : no-repeat ;
}
</ style >

 

<!--
=   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *  
*     作 者：  我本有心
=     QQ:      381584252
*      E - Mail: hztgcl1986@ 163 .com
=      转载请注明出处及作者！
*      版权所有,侵权必究！！！
=
*     http: // www.8848so.com，人物搜索，8848So    
=   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *   =   =   *  
-->
< script language = " javascript "  type = " text/javascript " >
// ---------------------------------------------------------------------------------------------------------------表格排序
function  convert(data,type)  // 数据类型转换函数
{
     switch  (type)
    {
         case   " int " :  // 整型
             return  parseInt(data);
             break ;
         case   " float " :  // 浮点型
             return  parseFloat(data);
             break ;
         case   " date " :  // 日期型
             return   new  Date(Date.parse(data));
             break ;
         default :  // 字符型
             return  data.toString();
    }
}


function  returncompare(cellIndex,type)  // 比较函数生成器
{
     return   function  compare(oTR1,oTR2)  // 比较函数
            {
                 if  (oTR1.cells[cellIndex].order)  // 排序(order为自定义属性)
                {
                     var  str1  =  convert(oTR1.cells[cellIndex].order,type);  // 数据类型转换
                     var  str2  =  convert(oTR2.cells[cellIndex].order,type);  // 数据类型转换
                }
                 else   // 按照td内文本排序
                {
                     var  str1  =  convert(oTR1.cells[cellIndex].innerHTML,type);  // 数据类型转换
                     var  str2  =  convert(oTR2.cells[cellIndex].innerHTML,type);  // 数据类型转换
                }
    
                 if  (str1  >  str2)  // 比较
                {
                     return   1 ;
                }
                 else   if  (str1  <  str2)
                {
                     return   - 1 ;
                }
                 else
                {
                     return   0 ;
                }
            }
}



function  tableSort(tableId,cellIndex,type)  // 排序表格ID,排序列索引,排序数据类型
{
     var  oTable  =  document.getElementById(tableId);  // 表格
     var  oTBody  =  oTable.tBodies[ 0 ];  // 表格的第一个tbody
     var  rows  =  oTBody.rows;  // tbody的rows
    
     var  rowsa  =   new  Array();
    
     for  ( var  i = 0 ;i < rows.length;i ++ )  // 将rows放入数组,用于排序
    {
        rowsa[i]  =  rows[i];
    }
    
     if  (oTable.lastSortCol  ==  cellIndex)  // 判断是否和上一次排序的列索引相等
    {
        rowsa.reverse();  // 反转
    }
     else
    {
        rowsa.sort(returncompare(cellIndex,type));  // 数组排序，调用比较函数
    }
    
     var  oDF  =  document.createDocumentFragment();  // 创建文档碎片
     for ( var  j = 0 ;j < rowsa.length;j ++ )  // 将排序后数组附加于文档碎片
    {
        oDF.appendChild(rowsa[j]);
    }
    
    oTBody.appendChild(oDF);  // 将文档碎片附加于tbody
    
    oTable.lastSortCol  =  cellIndex;  // 自定义属性,用于保存上一次排序的列索引


     // 以下代码：实现排序时图片的更换
     var  oTHead  =  oTable.tHead;
     var  cells  =  oTHead.rows[ 0 ].cells;
    
    
     for ( var  k = 0 ;k < cells.length;k ++ )
    {
         if  ((cells[k].className  == " desc "   ||  cells[k].className  == " asc " )  &&  cells[k].cellIndex  !=  cellIndex)
        {
            cells[k].className  =   " orderby " ;
        }
    }
    
     if  (cells[cellIndex].className  ==   " asc " )
    {
        cells[cellIndex].className  =   " desc " ;
    }
     else
    {
        cells[cellIndex].className  =   " asc "
    }
     //

}
// ---------------------------------------------------------------------------------------------------------------
</ script >

 

 调用示例：

<table id="hzt">

<tr><th οnclick="tableSort('hzt',0,'int')">数字</th></tr> <!--整型int,浮点型float,日期型date,字符型string-->

<tr><td>1</td></tr>

<tr><td>2</td></tr>

</table>