table表头标题th浮动提示-MyTable.js

/*
$(document).ready(function () {
    var maxH = ($(window).height() - $("#divParent").position().top - 6);
    $("#divParent").css("height", maxH + "px").css("max-width", $("#tb1").width() + "px");

    $.CreateFixedTableThead(document.getElementById("tbThead"), true);
    $.CreateFixedTableThead(document.getElementById("tbDeatil"), true);

});
*/
(function (a) {
    a.CreateFixedTableThead = function (useTable, doNotSetParentDiv) {
        if (!useTable) return;

        var fixedDivId = $(useTable).attr("id") + "mytable1111";
        if (document.getElementById(fixedDivId)) {
            $("#" + fixedDivId).css("width", ($(useTable).width() + 2) + "px");
            return;
        }
        //var newObject = $(useTable).find("thead");
        useTable = $(useTable);
        //useTable.css("max-height","400px");
        var newObject, newTheadDiv, useTableParent;
        newObject = useTable.clone();
        newObject.attr("id", fixedDivId).attr("width", "100%").css("width", "100%");
        //.removeAttr("width");
        //.css({ 'margin-right': 0, 'margin-left': 0 });
        newObject.find("tbody").remove();
        if (newObject.find("tr").length <= 0) {
            newObject.html(useTable.find(".trcss"));
        }

        useTableParent = useTable.parent();
        //$(this).height()
        if (!useTableParent) { return; }

        var trLength = newObject.find("tr").length;

        //================设置表外层格式 开始================================================

        if (!doNotSetParentDiv) {
            //useTable.find("tr").height()
            var maxH = ($(window).height() - useTableParent.position().top - 6), winWidth = $(window).width();
            if ($.browser.msie) { maxH = maxH - 14;  }
            //设置父级div的position 值
            //useTableParent.css("position", "relative");
            //{position:'relative',overflow-y:'auto',max-height:400}
            useTableParent.css({ "position": 'relative', "overflow-y": 'auto', "max-height": maxH + "px" });
            if (winWidth < useTableParent.width() || winWidth < useTable.width()) {
                //当表格宽度大于界面时设置 横向滚动条。
                if (useTableParent.css("max-width") == "none" || useTableParent.css("max-width") == "") {
                    useTableParent.css("max-width", $(window).width() + "px").css("overflow-x", "auto");
                    $("body").css("overflow-x", "hidden");
                    if ($.browser.msie) { maxH = maxH - 20; }
                    useTableParent.css("max-height", (maxH) + "px");
                }
            }
        }
        //================设置表外层格式 结束================================================

        //position: absolute;
        newTheadDiv = $("<div style='position:fixed;left:0px;z-index:10;'></div>");
        newTheadDiv.css("width", (useTable.width() + 2) + "px")
                   .css("top", useTableParent.position().top + "px");
        if (trLength > 1) {
            newTheadDiv.css("left", "");
        }
        //.css("margin-left", useTable.css("margin-left"));

        newTheadDiv.append(newObject);
        useTableParent.append(newTheadDiv);


        var tdArr = $(newObject).find("tr:first td,th");
        useTable.find("tr:first").find("th,td").each(function (index, obj) {
            $(tdArr[index]).css("width", $(obj).width() + "px");
        });

        $(window).resize(function () {
            newTheadDiv.css("width", (useTable.width() + 2) + "px");
            var tdArr = $(newObject).find("tr:first td,th");
            useTable.find("tr:first").find("th,td").each(function (index, obj) {
                $(tdArr[index]).css("width", $(obj).width() + "px");
            });
        });
        $(useTableParent).scroll(function () {
            var leval = $(this).scrollLeft();
            if (leval == 0) {
                $(newTheadDiv).css("left", "");
            } else {
                leval = leval;
                $(newTheadDiv).css("left", "-" + leval + "px");
            }
        });

    };

})(jQuery);

 

 

方法二：

    <thead>
                            <tr style="position: relative;top: expression((this.offsetParent.scrollTop>this.parentElement.parentElement.offsetTop?this.offsetParent.scrollTop-this.parentElement.parentElement.offsetTop-38:0)-1);">
                                <th class="tdcss" onclick="sortAble('tb',0,'int')">
                                    房间资料分析
                                </th>
                                <th class="tdcss" colspan="4" onclick="sortAble('tb',1,'int')">
                                    本日统计
                                </th>
                                <th class="tdcss" colspan="4" onclick="sortAble('tb',2,'int')">
                                    本月统计
                                </th>
                                <th class="tdcss" colspan="4" onclick="sortAble('tb',3,'int')">
                                    本年统计
                                </th>
                            </tr>
    </thead>

主要是此段代码：

<tr style="position: relative;top: expression((this.offsetParent.scrollTop>this.parentElement.parentElement.offsetTop?this.offsetParent.scrollTop-this.parentElement.parentElement.offsetTop-38:0)-1);" >

至少兼容IE8