码迷,mamicode.com
首页 > Web开发 > 详细

Jquery 表格固定表头

时间:2015-05-07 16:24:15      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:

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

(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);

好用,就拿走。

Jquery 表格固定表头

标签:

原文地址:http://www.cnblogs.com/goldli/p/4484982.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!