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: [e-mail]
=     轉載請註明出處及作者！
*     版權所有,侵權必究！！！
=
*    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 onclick="tableSort('hzt',0,'int')">數字</th></tr> <!--整型int,浮點型float,日期型date,字符型string-->

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

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

</table>