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

table表头标题th浮动提示-MyTable.js的更多相关文章

  1. table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

    方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...

  2. html中table表格标题固定表数据行出现滚动条

    需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...

  3. tip浮动提示框

    今天工作中碰到要弹出tip浮动提示框,如服务器控件的ToolTip属性. 通过GOOGLE搜到了一个很好用的tip浮动提示框:TipTip jQuery Plugin. 例子如下: <!DOCT ...

  4. bootstrap table 实现固定悬浮table 表头并可以水平滚动

    在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...

  5. element ui table表头动态筛选条件

    本文主要实现:根据el-table表格数据自动生成表头筛选条件的方法,可根据表格数据动态调整. el-table表格的表头增加筛选功能,大家平时都是怎么实现的呢?先看看官方文档的例子: 1 <t ...

  6. Tooltip浮动提示框效果(掌握里面的小知识)

    使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化.事件绑定.事件冒泡等技巧和知识. 特效四个关键点:显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示 ...

  7. ElementUI - Table 表头排序

    ElementUI - Table 表头自带排序功能,和排序事件,但是目前只是对当前界面的数据进行排序. 项目需求: 点击表头排序的时候,对所有数据进行排序. 初步方案: 在点击排序按钮的时,在排序事 ...

  8. Excel设置excel打印每页都有表头标题

    Excel设置excel打印每页都有表头标题

  9. table表头固定问题

    table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...

随机推荐

  1. jquery面试需要看的基本东西

    1. offset() 方法的学习offset().left offset().top 表示离document的距离.(浏览器可以看到的地方的距离)2. position与offset的区别:a.使用 ...

  2. css的垂直居中

    请先看博客:http://www.jb51.net/css/39629.html

  3. WCF 入门(23,24)

    前言 重新找了工作,过去的事情就过去好了.有些不一样的经历也不是说一定就是坏事. 第24集 在控制台应用程序中自托管WCF服务 Self hosting a wcf service in consol ...

  4. php_curl模拟登录有验证码实例

    <?php/** * @author 追逐__something * @version $id */define('SCRIPT_ROOT',dirname(__FILE__).'/');$ac ...

  5. Owin中间件搭建OAuth2.0认证授权服务体会

    继两篇转载的Owin搭建OAuth 2.0的文章,使用Owin中间件搭建OAuth2.0认证授权服务器和理解OAuth 2.0之后,我想把最近整理的资料做一下总结. 前两篇主要是介绍概念和一个基本的D ...

  6. Statement,PreparedStatement和CallableStatement的联系和区别

    联系: CallableStatement继承自PreparedSatement,PreparedStatement继承自Statement. 区别: 1:Statement 每次执行sql语句,数据 ...

  7. jQuery 文本编辑器插件 HtmlBox 使用

    0.htmlbox下载地址:http://download.csdn.net/detail/leixiaohua1020/6376479 1.引入头文件 <script src="li ...

  8. 【Matplotlib】 标注一些点

    相关的文档: Annotating axis annotate() command 标注的代码如下: ... t = 2 * np.pi / 3 plt.plot([t, t], [0, np.cos ...

  9. codevs3243 区间翻转

    题目描述 Description 给出N个数,要求做M次区间翻转(如1 2 3 4变成4 3 2 1),求出最后的序列 输入描述 Input Description 第一行一个数N,下一行N个数表示原 ...

  10. CODEVS 1959 拔河比赛(另一版本)

    题目描述 Description 一个学校举行拔河比赛,所有的人被分成了两组,每个人必须(且只能够)在其中的一组,要求两个组的人数相差不能超过1,且两个组内的所有人体重加起来尽可能地接近. 输入描述 ...