学步园

//整体思路还是老样子：在前面插入一个新table，里面只有表头，然后设置数据表格的高度使其滚动即可。

//由于table的表头的宽度会根据内容或者下面行的内容改变，所以我们需要用的col标记来固定他的宽度，格式如：<col width='200px'></col>

//方法调用：直接传进去表格的id和想要滚动的高度就可以了
jQuery.fn.outerHTML = function (s) {
    return s
            ? this.before(s).remove()
            : jQuery("<p>").append(this.eq(0).clone()).html();
};//这个是获取元素的全部html，下面复制表头的时候要用到，因为复制表头的时候需要把样式也复制过去（如果里面没任何样式就免了。。）



function fixHeader(tableID,height) {
    var table = $("#" + tableID);
    var headers = table.find("th").length > 0
                ? table.find("th")
                : table.find("tr:first");


    var colHTML = "";


    //最后一个col不用管，让它自己去适应
    for (var i = 0; i < headers.find("td").length - 1; i++) {
        colHTML += "<col width = '" + headers.find("td:eq(" + i + ")").width() + "'></col>";
    }


    //插入表头
    table.before("<table class='thead'>" + colHTML + "<tbody>" + headers.outerHTML() + "</tbody></table>");


    //重置表头的宽度
    $(".thead").width(table.width());


    //原表中插入col标记
    table.find("tbody").before(colHTML);   


    table.css("display", "block").height(height).css("overflowY", "scroll");
    
    if ($.browser.msie) {
        //IE下表格不能通过设置表格高度来实现滚动
        table.wrap("<div class='tablewrap'></div>");        
        //$(".tablewrap").width(table.width();
        $(".tablewrap").height(height).css("overflowY", "auto").css("overflowX", "hidden");       
    }


    //删除第一行
    headers.height(0).find("td").html("").height(0);
}

//自己写的方法，，菜鸟作品，如果有Bug，还望指正。。