使用Javascript对表格进行排序（摘自Javascript高级程序设计）-优快云博客

本文介绍了一个使用JavaScript实现的表格排序功能，通过简单的函数可以按不同数据类型（整数、浮点数、日期）对HTML表格进行排序。示例中包含了LastName、FirstName、Birthday和Siblings等字段的排序操作。

// sortTable.js 文件
        function convert(sValue,sDataType)
        {
            switch(sDataType)
            {
                case "int":
                    return parseInt(sValue);
                    break;
                case "float":
                    return parseFloat(sValue);
                    break;
                case "date":
                    return new Date(Date.parse(sValue));
                    break;
                default:
                    return sValue.toString();
            }
        }

        function generateCompareTrs(iCol,sDataType)
        {
            return function compareTrs(oTr1,oTr2)
            {
                var vValue1 = convert(oTr1.cells[iCol].firstChild.nodeValue,sDataType);
                var vValue2 = convert(oTr2.cells[iCol].firstChild.nodeValue,sDataType);
                if(vValue1 < vValue2)
                {
                    return -1;
                }
                else if(vValue1> vValue2)
                {
                    return 1;
                }
                else
                {
                    return 0;
                }
            }
        }
        function sortTable(sTableId,iCol,sDataType)
        {
            var oTable = document.getElementById(sTableId);
            var oTBody = oTable.tBodies[0];
            var colDataRows = oTBody.rows;
            var aTrs = new Array();
            for(var i = 0;i<colDataRows.length;i++)
            {
                aTrs.push(colDataRows[i]);
            }
            if(oTable.sortCol == iCol)
            {
                aTrs.reverse();
            }
            else
            {
                aTrs.sort(generateCompareTrs(iCol,sDataType));
            }
            var oFragment = document.createDocumentFragment();
            for(var i = 0;i<aTrs.length;i++)
            {
                oFragment.appendChild(aTrs[i]);
            }
            oTBody.appendChild(oFragment);
            oTable.sortCol = iCol;
        }

    //The end

<!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>
    <title>无标题页</title>
    <script type="text/javascript" src="sortTable.js"></script>
</head>
<body>
    <table border="1" id="tblSort">
        <thead>
            <tr>
                <th onclick="sortTable('tblSort',0)" style="cursor:pointer ">Last Name</th>
                <th onclick="sortTable('tblSort',1)" style="cursor:pointer ">First Name</th>
                <th onclick="sortTable('tblSort',2,'date')" style="cursor:pointer ">Birthday</th>
                <th onclick="sortTable('tblSort',3,'int')" style="cursor:pointer ">Siblings</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Smith</td>
                <td>John</td>
                <td>7/12/1978</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Sjohnson</td>
                <td>Betty</td>
                <td>10/15/1977</td>
                <td>4</td>
            </tr>
            <tr>
                <td>Henderson</td>
                <td>Nathan</td>
                <td>2/25/1949</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Williams</td>
                <td>James</td>
                <td>7/8/1980</td>
                <td>4</td>
            </tr>
            <tr>
                <td>Gilliam</td>
                <td>Michael</td>
                <td>7/22/1949</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Walker</td>
                <td>Matthew</td>
                <td>1/14/2000</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>