js 对页面table数据排序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>无标题文档</title>  
<script type="text/javascript">   
//排序 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;     
        }     
       };     
}   
<script>  
</head>  
 
<body>  
 <table border="1" id="tableId">     
            <thead>     
                <tr>     
                    <th onclick="sortAble('tableId', 0)"       
                         style="cursor:pointer" mce_style="cursor:pointer">name</th>     
                    <th onclick="sortAble('tableId', 1, 'date')"    
                         style="cursor:pointer" mce_style="cursor:pointer">Birthday</th>     
                    <th onclick="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> 

 

你可能感兴趣的:(html,Date,function,XHTML,table,border)