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
table表头标题th浮动提示-MyTable.js的更多相关文章
- table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
- html中table表格标题固定表数据行出现滚动条
需求 web系统中有的用户不喜欢分页,希望数据能在一个页面中全部显示出来. 但是页面中是有滚动条的,当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列. 也就是无法知道这个列是什么数据. 所以 ...
- tip浮动提示框
今天工作中碰到要弹出tip浮动提示框,如服务器控件的ToolTip属性. 通过GOOGLE搜到了一个很好用的tip浮动提示框:TipTip jQuery Plugin. 例子如下: <!DOCT ...
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的.项目的css框架是bootstrap 3,故也可以叫做bootstrap table. 需要实现的是:表格头部固定,并且支持水平滚 ...
- element ui table表头动态筛选条件
本文主要实现:根据el-table表格数据自动生成表头筛选条件的方法,可根据表格数据动态调整. el-table表格的表头增加筛选功能,大家平时都是怎么实现的呢?先看看官方文档的例子: 1 <t ...
- Tooltip浮动提示框效果(掌握里面的小知识)
使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化.事件绑定.事件冒泡等技巧和知识. 特效四个关键点:显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示 ...
- ElementUI - Table 表头排序
ElementUI - Table 表头自带排序功能,和排序事件,但是目前只是对当前界面的数据进行排序. 项目需求: 点击表头排序的时候,对所有数据进行排序. 初步方案: 在点击排序按钮的时,在排序事 ...
- Excel设置excel打印每页都有表头标题
Excel设置excel打印每页都有表头标题
- table表头固定问题
table表头固定问题 原生的table表头在表格滚动时候无法固定,可以使用以下的方法进行模拟 1. 双table法 表头和表体各用一个table,这样会产生表格列对不齐的问题,可以使用colgrou ...
随机推荐
- Bootstrap系列 -- 28. 下拉菜单状态
下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus). 下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled).这两种状态使用方法 ...
- Linux下硬盘安装Windows系统。
注意:本方法安装后会把Linux系统损坏,方法适用于完全不再需要Linux系统. 本方法在ubuntu 14.04,centos 6.5,debian 8测试成功. 安装方法是通过grub2引导Win ...
- 17.C#类型判断和重载决策(九章9.4)
今天来结束第九章,聊下我们经常忽略,但是编译器会帮我们完成的"类型判断和重载决策",理解编译器如何帮我们完成,相信在写代码时会更明确,避免一些编译出错,排查的问题,让我们开发更给力 ...
- Bootstrap3.0学习第十八轮(JavaScript插件——下拉菜单)
详情请查看 http://aehyok.com/Blog/Detail/25.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:h ...
- DOM(四)事件流
1.冒泡型事件 浏览器的事件模型分两种:捕获型事件和冒泡型事件.由于ie不支持捕获型事件,所以以下主要以冒泡型事件作为讲解.(dubbed bubbling)冒泡型指事件安装最特定的事件到最不特定的事 ...
- 英语etc怎么发音、单词来历
etc是等等的意思,与and so on 相同 音标/et'set(a)ra/ 源于法语et cetera,也是等等的意思 在计算机操作系统目录(linux和windows)有一个叫etc的目录 里面 ...
- 【ZOJ 3844】Easy Task
题意 每次把序列中最大的数a的一个和最小的数b的一个变成a-b.求最后是否能使序列里的数全部相同,能则输出这个相同的数. 分析 一定是有解的,不断减少最大数的个数,最大数减少为0个时,就是减少了不同数 ...
- 【CodeForces 471A】MUH and Sticks
题 题意 给你六根木棍的长度,熊需要头比身体短,大象需要头和身体一样,四肢要一样长,否则就是外星人.请你判断能组成哪一个. 分析 暴力,循环看一下每根有几根相同的,然后如果有四根都是有四根相同的&am ...
- poj 2142 扩展欧几里得解ax+by=c
原题实际上就是求方程a*x+b*y=d的一个特解,要求这个特解满足|x|+|y|最小 套模式+一点YY就行了 总结一下这类问题的解法: 对于方程ax+by=c 设tm=gcd(a,b) 先用扩展欧几里 ...
- Uva11134 Fabled Rooks
普通的贪心题. 虽然图是二维的,但可以把横向和纵向分开处理. 将区间按右端点排序,然后从区间左端点到右端点找第一个空位置放棋子即可. /*by SilverN*/ #include<algori ...