jquery点击table表头排序

Views

       		

            

                

                    

                        序号
                    
                    

                        书名
                    
                
            
            

                

                    

                       1
                    
                    

                        狼图腾
                    
                
 
        

Jquery

$(function () {
    var tableObject = $('#tableID'); //获取id为tableSort的table对象
    var tbHead = tableObject.children('thead'); //获取table对象下的thead
    var tbHeadTh = tbHead.find('tr th'); //获取thead下的tr下的th
    var tbBody = tableObject.children('tbody'); //获取table对象下的tbody
    var tbBodyTr = tbBody.find('tr'); //获取tbody下的tr

    var sortIndex = -1;

    tbHeadTh.each(function () {//遍历thead的tr下的th
        var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号
        //给表态th增加鼠标位于上方时发生的事件
        $(this).mouseover(function () {
            tbBodyTr.each(function () {//编列tbody下的tr
                var tds = $(this).find("td"); //获取列号为参数index的td对象集合
                $(tds[thisIndex]).addClass("hover"); //给列号为参数index的td对象添加样式
            });
        }).mouseout(function () {//给表头th增加鼠标离开时的事件
            tbBodyTr.each(function () {
                var tds = $(this).find("td");
                $(tds[thisIndex]).removeClass("hover"); //鼠标离开时移除td对象上的样式
            });
        });

        $(this).click(function () {//给当前表头th增加点击事件
            var dataType = $(this).attr("type"); //点击时获取当前th的type属性值
            var trsValue = new Array();            //先声明一维
            for (var i = 0; i < tbBodyTr.length; i++) {
                trsValue[i] = new Array();         //在声明二维
                var tds = $(tbBodyTr[i]).find('td');
                trsValue[i][1] = $(tds[$(this).index()]).html();
                trsValue[i][2] = $(tbBodyTr[i]).html();
                $(tbBodyTr[i]).html("");
            }
            var len = trsValue.length;

            if ($(this).index() == sortIndex) {
                //如果已经排序了则直接倒序
                trsValue.reverse();
            } else {
                trsValue.sort(createCompact(dataType));
            }
            for (var i = 0; i < len; i++) {
                $("tbody tr:eq(" + i + ")").html(trsValue[i][2]);
            }

            sortIndex = $(this).index();
        });
    });

    $("tbody tr").removeClass(); //先移除tbody下tr的所有css类
    //table中tbody中tr鼠标位于上面时添加颜色,离开时移除颜色
    $("tbody tr").mouseover(function () {
        $(this).addClass("hover");
    }).mouseout(function () {
        $(this).removeClass("hover");
    });

});

function createCompact(styType) {
    return function (object1, object2) {
        var value1 = object1[1];
        var value2 = object2[1];
        if (styType == "number") {
            //处理数字排序
            return value2 - value1;
        } else {
            if (value1 < value2) {
                return -1;
            } else if (value1 > value2) {
                return 1;
            } else {
                return 0;
            }
        }

    }
}

Jquery下载： 百度网盘