表格排序

数组中有一个sort方法，用于数组排序，sort可以接收一个参数，指明比较函数。

定义比较函数

   //比较函数
 function compareFun(value1,value2){
        if(value1 > value2){
            return 1;
        }else if(value1 < value2){
            return -1;
        }else {
            return 0;
        }
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type='image/x-icon' href="img/tab.ico">
    <title>表格排序</title>

    <style>
    #tabSort tr{text-align: center}
    #tabSort th{cursor: pointer}
    #tabSort img{
        32px;
        height:32px;
    }
    </style>
</head>
<body>

<h5>表格排序</h5>
<table id='tabSort' border=1>
    <thead>
        <tr>
            <th onclick="sortTable('tabSort',0,'string')">name</th>
            <th onclick="sortTable('tabSort',1,'int')">age</th>
            <th onclick="sortTable('tabSort',2,'date')">birthday</th>
            <th onclick="sortTable('tabSort',3)">details</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>22</td>
            <td>1993-5-5</td>
            <td sortValue='png' ><img src="img/user1.png" ></td>
        </tr>
        <tr>
            <td>Sunny</td>
            <td>21</td>
            <td>1994-3-3</td>
            <td sortValue='png' ><img src="img/user2.png" ></td>
        </tr>
        <tr>
            <td>Jenny</td>
            <td>23</td>
            <td>1992-2-2</td>
            <td sortValue='jpeg' ><img src="img/user3.jpeg" ></td>
        </tr>
        <tr>
            <td>Sara</td>
            <td>25</td>
            <td>1990-12-12</td>
            <td sortValue='bmp' ><img src="img/user4.bmp" ></td>
        </tr>
        <tr>
            <td>Coco</td>
            <td>24</td>
            <td>1991-1-1</td>
            <td sortValue='jpeg' ><img src="img/user5.jpeg" ></td>
        </tr>
    </tbody>
</table>


<script>

function sortTable(tabId,sortCol,dataType){
    var tab=document.getElementById(tabId);
    var tBody=tab.tBodies[0];
    var tRows=tBody.rows; //获取tBody中的行 排除thead
    var rowArr=[]; //tRows不是真正的数组，不能直接使用sort（Array的方法）函数,所以先存成数组
    for(var i=0,len=tRows.length;i<len;i++){
        rowArr[i] = tRows[i];
    }
    //对各行进行排序
    if(tab.sortFlag!=sortCol){
        var compFunc=getCompareFun(sortCol,dataType);
        rowArr.sort(compFunc);
    }else{ 
        rowArr.reverse(); //已经排序过，再进行一次逆序排列
    }
     
    //将排序的结果追加至表中
    for(var j=0,len=rowArr.length;j<len;j++){
        tBody.appendChild(rowArr[j]);  // appendChild中引用的是表中行元素，只存在一个该行元素
    }
    tab.sortFlag=sortCol;
}
//获取排序函数 传给sort函数
function getCompareFun(colIndex,dataType){
    return function compareFun(tr1,tr2){
        var value1=tr1.cells[colIndex].getAttribute('sortValue');
        var value2=tr2.cells[colIndex].getAttribute('sortValue');
        if(value1==undefined || value2==undefined){
            value1 = convert(tr1.cells[colIndex].firstChild.nodeValue,dataType);
            value2 = convert(tr2.cells[colIndex].firstChild.nodeValue,dataType);
        }
        if(value1 > value2){
            return 1;
        }else if(value1 < value2){
            return -1;
        }else {
            return 0;
        }
    }
}
function convert(value,dataType){
    switch(dataType){
        case "int":
        return parseInt(value);
        break;
        case "string":
        return value.toString();
        break;
        case "date":
        return +new Date(Date.parse(value));  //转换成毫秒数
        break;
        default:
        return value.toString();
    }
}
    
</script>
    
</body>
</html>

View Code