/*
$(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