您的位置:首页 > Web前端 > JavaScript

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

2014-03-12 14:23 471 查看
/*
$(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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐