表格的排序原生js和jQuery方法[典型]

在最近的项目开发中，后端返回的JSON数据要求以表格的方式表现并且表格能够实现点击某个字段实现对表格的排序。开始没有思路，一直想用服务器端控件来实现该功能但出于性能的考虑，必须在客户端来实现，因此要通过js来完成该项功能。表格在表现时还要考虑隔行变色及鼠标移到每行时该行背景颜色的变化，在实现排序的经思考，具体实现的代码如下：

HTML中的表格如下：

<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolordark="#999999" bordercolorlight="#FFFFFF">
<thead>
<tr>
    <th>序号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>级别</th>
    <th>备注</th>
</tr>
</thead>
<tbody>
  <tr>
    <td align="center">1</td>
    <td align="center">秦寿生</td>
    <td align="center">23</td>
    <td align="center">初级</td>
    <td> </td>
  </tr>
  <tr>
    <td align="center">2</td>
    <td align="center">史珍香</td>
    <td align="center">34</td>
    <td align="center">中级</td>
    <td> </td>
  </tr>
  <tr>
    <td align="center">3</td>
    <td align="center">苏丹红</td>
    <td align="center">67</td>
    <td align="center">高级</td>
    <td> </td>
  </tr>
  <tr>
    <td align="center">4</td>
    <td align="center">朱毅志</td>
    <td align="center">30</td>
    <td align="center">中级</td>
    <td> </td>
  </tr>
  <tr>
    <td align="center">5</td>
    <td align="center">宋秋波</td>
    <td align="center">17</td>
    <td align="center">初级</td>
    <td> </td>
  </tr>
  <tr>
    <td align="center">6</td>
    <td align="center">范建</td>
    <td align="center">88</td>
    <td align="center">教授</td>
    <td> </td>
  </tr>
  <tr>
    <td align="center">7</td>
    <td align="center">艾莉彩</td>
    <td align="center">19</td>
    <td align="center">初级</td>
    <td> </td>
  </tr>
  </tbody>
</table>

原生的js和借用jQuery的代码如下：

    <script type="text/javascript">
        window.onload = function () {
            var tableObj = document.getElementsByTagName('table')[0],
                ageObj = document.getElementById('age'),
                flag = true;

            ageObj.onclick = function () {
                var trs = tableObj.rows;
                var arr = [];

                for (var i = 1, len = trs.length; i < len; i++) {

                    //除去第一行标题
                    arr.push(trs[i]);
                }
                sortTab(arr);

                var tbodyObj = tableObj.children[1];
                if (flag) {

                    //考虑减少Dom的操作
                    var hash = document.createDocumentFragment();
                    for (var i = 0, len = arr.length; i < len; i++) {
                        hash.appendChild(arr[i]);
                    }
                    tbodyObj.appendChild(hash);
                    flag = false;
                } else {
                    var hash = document.createDocumentFragment();
                    for (var i = arr.length - 1; i >= 0; i--) {
                        hash.appendChild(arr[i]);
                    }
                    tbodyObj.appendChild(hash);
                    flag = true;
                }

                setTrBg();
            };

            setTrBg();

            function sortTab(arr) {
                if (Object.prototype.toString.apply(arr)==='[object Array]') {

                    for (var i = 0, len = arr.length; i < len; i++) {
                        for (var j = i + 1; j < len; j++) {
                            var a = parseInt(arr[i].cells[2].innerHTML),
                                b = parseInt(arr[j].cells[2].innerHTML);

                            if (a > b) {
                                var temp = arr[i];
                                arr[i] = arr[j];
                                arr[j] = temp;
                            }
                        }
                    }
                }
            }

            function setTrBg() {
                //为表格添加隔行样式
                var trs = tableObj.rows;
                for (var i = 1, len = trs.length; i < len; i++) {
                    if (i % 2 == 1) {
                        trs[i].className = 'odd';
                    } else {
                        trs[i].className = 'even';
                    }

                    //为行增加触发事件
                    var oldClassName;
                    trs[i].onmouseover = function () {
                        oldClassName = this.className;
                        this.className = 'over';
                    };

                    trs[i].onmouseout = function () {
                        this.className = oldClassName;
                    }
                }

            }
        };

        $(function () {
            var flag = true;
            $('table > thead > tr > th:first').click(function () {
                var $tbody = $(this).parents('thead').next(),
                $trs = $tbody.find('tr'),
                arr = [];
                $trs.each(function () {
                    arr.push($(this));
                });

                sortJqueryObj(arr);

                if (flag) {
                    $tbody.append(arr);
                    flag = false;
                } else {
                    arr.reverse();
                    $tbody.append(arr);
                    flag = true;
                }

                setTrsBg();
            });           
        });

        function sortJqueryObj(arr) {
            if (Object.prototype.toString.apply(arr)==='[object Array]') {
                for (var i = 0, len = arr.length; i < len; i++) {
                    for (var j = i + 1; j < len; j++) {
                        var currentValue = parseInt(arr[i].find('td:first-child').text()),
                            nextValue = parseInt(arr[j].find('td:first-child').text());

                        if (currentValue > nextValue) {
                            var temp = arr[i];
                            arr[i] = arr[j];
                            arr[j] = temp;
                        }

                    }
                }
            }
        }

        function setTrsBg() {
            var $trs = $('table tr');
            $trs.not(':first').filter(':odd').attr('class', 'odd');
            $trs.not(':first').filter(':even').attr('class', 'even');
        }
    </script>

希望对大家能够有所帮助。