Jquery 表格固定表头

网上找了好多现成的。结果没一个能成。只得自己动手。

(function($){
    $.fn.fixHeader = {
        init : function(obj){
            var p = obj.parent();
            //绑定事件
            p.scroll(internalScroll);


            //获取表格第一行
            var head = obj.children("thead tr th:first");
            if (!head || head.length == 0) {
                var body = obj.children("tbody")[0];
                head = $(body.children[0].children[0]);
            }

            var headHeight = head.height();

            //创建新层
            var headDiv = $("<div></div>").appendTo(p);
            headDiv.css({
                "width": p[0].scrollWidth,
                "position":"absolute",
                "top": p.offset().top,
                "display" : "none",
                "background-color":"#f5f5f5",
                "height": headHeight
            });

            //克隆第一行
            var table = $("<table id='tblFixHeader'></table>").appendTo(headDiv);
            $(obj[0].attributes).each(function () {
                if (this.name == "id" || this.name == "ID" || this.name == "Id") return true;
                if (this.value.indexOf("background-color") > -1) {
                    table.attr(this.name, this.value.replace(new RegExp("background-color", "g"),""));
                } else {
                    table.attr(this.name, this.value);
                }
            });
            table.css("text-align", "center").css("background-color", null);

            var tr = $("<tr></tr>").appendTo(table);
            if (body) {
                $(body.children[0]).children().each(function() {
                    var td = $("<td></td>").appendTo(tr);
                    td.css({
                        "width" : $(this).width(),
                        "font-size" : $(this).css("font-size"),
                        "background-color" : $(this).css("background-color"),
                        "font-weight" : "bold"
                    });
                    td.text($(this).text());
                });                
            }

            //滚动事件
            function internalScroll() {
                var top = obj.scrollTop();
                if (top <= 100 - headHeight) {
                    headDiv.css("display","");
                }else{
                    headDiv.css("display","none");
                }
                $("#btnTest").val(top + " " + head.height());
            }

            $(window).resize(function() {
                setTimeout(100, doResize());
            });

            function doResize() {
                headDiv.css("width", p[0].scrollWidth);
                var tbl = $("#tblFixHeader");
                if (tbl && tbl.length == 1) {
                    var line = obj.children().get(0).children[0];
                    if (line) {
                        var line2 = tbl.children().get(0).children[0];
                        if (line2) {
                            for (var i = 0; i < line.children.length; i++) {
                                $(line2.children[i]).css("width", $(line.children[i]).css("width"));
                            }
                        }
                    }
                }
            }
        }
    };
})(jQuery);

好用,就拿走。

posted @ 2015-05-07 15:11  (大贤者模式)  阅读(2950)  评论(0编辑  收藏  举报