zoukankan      html  css  js  c++  java
  • 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);

    好用,就拿走。

  • 相关阅读:
    VS2013
    有了门面,程序会更加体面!- pos软件基于三层架构 -09
    无熟人难办事?- 闲聊设计模式-迪米特法则
    三层架构,分层开发
    Filezilla 错误
    归档和压缩
    在Linux系统下用dd命令制作ISO镜像U盘启动盘
    脚本语言
    node.js知识点提取
    npm cnpm
  • 原文地址:https://www.cnblogs.com/goldli/p/4484982.html
Copyright © 2011-2022 走看看