js表格排序

//表格列排序的js方法：

//1.比较函数： 

//参数说明：列索引，列数据类型

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;
                }
            };
        }

   //2.类型转换函数

//参数说明：要转换的值，目标数据类型

        function convert(sValue, sDataType) {
            switch (sDataType) {
                case "int":
                    return parseInt(sValue);
                    break;
                case "float":
                    return parseFloat(sValue);
                    break;
                case "date":
                    sValue = sValue.replace(/\-/g, "/");
                    return new Date(Date.parse(sValue));
                    break;
                default:
                    return sValue.toString();
            }
        }

  //3.排序函数

//参数说明：表ID，排序列索引，列数据类型
        function sortTable(tableID, iCol, sDataType) {
            var tb = document.getElementById(tableID);
            var arr = new Array();
            var coll = tb.tBodies[0].rows;
            if (coll.length > 0) {
                for (var i = 0; i < coll.length; i++) {
                    arr.push(coll[i]);
                }
                if (tb.sortCol == iCol) {
                    arr.reverse();
                }
                else {
                    arr.sort(generateCompareTRs(iCol, sDataType));
                }
                var oFrament = document.createDocumentFragment();
                for (var i = 0; i < arr.length; i++) {
                    oFrament.appendChild(arr[i]);
                }
                tb.tBodies[0].appendChild(oFrament);
                tb.sortCol = iCol;
            }
        }

 

HTML：

   <table id="tb">
        <thead>
            <tr>
                <th style="cursor: pointer;" onclick="sortTable('tb',0,'int')">
                    编号
                </th>
                <th style="cursor: pointer;" onclick="sortTable('tb',1,'str')">
                    姓名
                </th>
                <th style="cursor: pointer;" onclick="sortTable('tb',2,'float')">
                    金钱
                </th>
                <th style="cursor: pointer;" onclick="sortTable('tb',3,'date')">
                    更新日期
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    2
                </td>
                <td>
                   刘志国
                </td>
                <td>
                    435.34
                </td>
                <td>
                    2012-10-02
                </td>
            </tr>
            <tr>
                <td>
                    5
                </td>
                <td>
                    许世友
                </td>
                <td>
                    121.34
                </td>
                <td>
                    2012-03-01
                </td>
            </tr>
            <tr>
                <td>
                    1
                </td>
                <td>
                    Jack
                </td>
                <td>
                    22.324
                </td>
                <td>
                    2012-04-07
                </td>
            </tr>
            <tr>
                <td>
                    7
                </td>
                <td>
                    Tom
                </td>
                <td>
                    132.32
                </td>
                <td>
                    2012-12-02
                </td>
            </tr>
        </tbody>
    </table>