• 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>

  • 相关阅读:
    jQuery基础及选择器
    JavaScript面向对象
    JavaScript操作DOM
    JavaScript Bom对象
    jquery内容
    jQuery基础
    正则表达式
    表单校验
    使用jQuery操作DOM
    jQuery中的动画
  • 原文地址:https://www.cnblogs.com/chongyb/p/2388494.html
Copyright © 2020-2023  润新知