JQuery学习笔记

$(document).ready(function () {
    $('table.sortable').each(function () {
        var $table = $(this);
        $('th', $table).each(function (column) {//显示迭代,为了知道是哪一个列
            if ($(this).is(".sort-alpha")) {//$(this)指向当前th        
                $(this).addClass("clickable").hover(//hover是个开关,和toggle一个原理
                    function () { $(this).addClass("hover"); },
                    function () { $(this).removeClass("hover"); }
                ).click(function () {
                    //找到所有的数据行,为了排序,使用get返回一个javascript数组
                    //jquery集合不带排序功能
                    var rows = $table.find('tbody>tr').get();
                    rows.sort(function (a, b) {
                        //获取对行中对应列的数据然后比较
                        var keyA = $(a).children('td').eq(column).text().toUpperCase();
                        var keyB = $(b).children('td').eq(column).text().toUpperCase();
                        if (keyA < keyB) return -1;
                        else
                            return 1;
                    });
                    $.each(rows, function (index, row) {
                        //把行添加回去,注意这里的添加不是真正的添加
                        //只是按顺序把table里面原来的行放回去,不添加,不替代
                        $table.children('tbody').append(row);
                    }
                    );
                });
            }
        });
    });
});