JavaScript表格排序的例子

发布时间:2020-01-29编辑:脚本学堂
本文介绍了javascript实现表格排序的方法,JavaScript表格排序的实现代码,有需要的朋友参考下。

一个HTML表格排序的程序,由于是自己写的,所以比较土,况且没有使用任何javascript库,所以只实现了一些简单的功能。
主要是了解一下原理。

例子,JavaScript表格排序 代码。
 

复制代码 代码示例:
function ieOrFireFox(ob) { 
    if (ob.textContent != null) 
        return ob.textContent; 
    var s = ob.innerText; 
    return s.substring(0, s.length); 

function sortTableByColumn(sortTableId,iCol,dataType){ 
    var sortTable = document.getElementById(sortTableId); 
     
    var tbody = sortTable.tBodies[0]; 
    var colRows = tbody.rows; 
    var aTrs = new Array; 
     
    var sortedHeader = sortTable.tHead.rows[0].cells[iCol]; 
    for (var i = 0; i < colRows.length; i++) { 
        aTrs[i] = colRows[i]; 
    }        
    if (sortTable.sortCol == iCol) { 
        if (sortTable.sortOrder == "desc") { 
            aTrs.sort(compareEle(iCol, dataType,'asc')); 
            sortTable.sortOrder = "asc"; 
        } else { 
            aTrs.sort(compareEle(iCol, dataType,'desc')); 
            sortTable.sortOrder = "desc"; 
        } 
    } else { 
        aTrs.sort(compareEle(iCol, dataType,'asc')); 
        sortTable.sortOrder = "asc"; 
    } 
    sortTable.sortCol = iCol;
    var oFragment = document.createDocumentFragment(); 
    for ( var i = 0; i < aTrs.length; i++) { 
        oFragment.appendChild(aTrs[i]); 
    } 
    tbody.appendChild(oFragment);

function sortTable(tableId,thobj,dataType) { 
    var iCol = document.getElementById(thobj).cellIndex; 
    sortTableByColumn(tableId,iCol,dataType); 

 
function convert(sValue, dataType,sortDerection) { 
    switch (dataType) { 
    case "int": 
        if(sValue.length <= 0){ 
            if(sortDerection == "asc") { 
                sValue = "1000"; 
            } else { 
                sValue = "-1"; 
            } 
        } 
        return parseInt(sValue, 10); 
    case "float": 
        return parseFloat(sValue); 
    case "date": 
        return new Date(Date.parse(sValue)); 
    default: 
        return sValue.toString().toLowerCase(); 
    } 

 
function compareEle(iCol, dataType,sortDerection) { 
    return function(oTR1, oTR2) { 
        var vValue1 = convert(ieOrFireFox(oTR1.cells[iCol]), dataType,sortDerection); 
        var vValue2 = convert(ieOrFireFox(oTR2.cells[iCol]), dataType,sortDerection); 
        var returnResult = 0; 
        if (vValue1 < vValue2) { 
            returnResult = -1; 
        } else if (vValue1 > vValue2) { 
            returnResult = 1; 
        } else { 
            returnResult = 0; 
        } 
        if(sortDerection == "desc"){ 
            return -returnResult; 
        } else { 
            return returnResult; 
        } 
    }; 

Html代码,表格排序。
 

复制代码 代码示例:
<html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
    <title>Table Sort Example-表格排序-www.jb200.com</title> 
        <script type="text/javascript" src="sortTable.js" > </script> 
         
    </head> 
 
    <body> 
        <p>Click on the table header to sort in ascending order.</p> 
        <table border="1" id="tblSort"> 
            <thead> 
                <tr> 
                    <th onclick="sortTableByColumn('tblSort',0)" style="cursor:pointer">Last Name</th> 
                    <th onclick="sortTableByColumn('tblSort',1,'date')" style="cursor:pointer">Date</th> 
                    <th onclick="sortTableByColumn('tblSort',2,'float')" style="cursor:pointer">Salary</th> 
                    <th onclick="sortTableByColumn('tblSort',3,'int')" style="cursor:pointer">Age</th> 
                    <th onclick="sortTableByColumn('tblSort',3,'int')" style="cursor:pointer">ChineseName</th> 
                </tr> 
            </thead> 
            <tbody> 
                <tr> 
                    <td>Smith</td> 
                    <td>2008/9/20</td> 
                    <td>100.03</td> 
                    <td>20</td> 
                    <td>我</td> 
                </tr> 
                <tr> 
                    <td>Johnson</td> 
                    <td>2008/10/4</td> 
                    <td>200.8</td> 
                    <td>18</td> 
                    <td>爱</td> 
                </tr> 
                <tr> 
                    <td>Henderson</td> 
                    <td>2008/10/11</td> 
                    <td>50.3</td> 
                    <td>45</td> 
                    <td>北</td> 
                </tr> 
                <tr> 
                    <td>Williams</td> 
                    <td>2008/10/08</td> 
                    <td>50</td> 
                    <td>20</td> 
                    <td>京</td> 
                </tr> 
                <tr> 
                    <td>Gilliam</td> 
                    <td>2008/10/3</td> 
                    <td>400.2</td> 
                    <td>9</td> 
                    <td>故</td> 
                </tr> 
                <tr> 
                    <td>Walker</td> 
                    <td>2008/11/4</td> 
                    <td>20.6</td> 
                    <td>20</td> 
                    <td>宫</td> 
                </tr> 
            </tbody> 
        </table>          
    </body> 
</html>