mg4377娱乐娱城官网_mg4377娱乐手机版_www.mg4377.com

当前位置: mg4377娱乐娱城官网 > www.mg4377.com > 正文

table组合表头的落真实情状势,jQuery达成冻结表头

时间:2019-06-07 20:30来源:www.mg4377.com
前不久要求做叁个报表样式,供给整合表头,以往把做出来的享受给我们, 引言 过多场合下,我们都要写一些报表,在数据量比十分大的景观下,会变成表内容太多,表相比长,须要用侧栏的

前不久要求做叁个报表样式,供给整合表头,以往把做出来的享受给我们,

引言

过多场合下,我们都要写一些报表,在数据量比十分大的景观下,会变成表内容太多,表相比长,须要用侧栏的下拉条举行查看数据--那一个小编未有怎么难点;不过官员们一般很喜欢,表头固定住,无论怎么下拉,分界面就那样大,内容便就好了,表头和表里面数据可能要对应好的.所以须求就建议来了:锁定表头,纵向拉伸,退换表内容,表头不改变.

本文实例讲述了jQuery达成冻结表头的法子。分享给大家供大家仿效。具体如下:

jQuery完成冻结表头的艺术

 那篇小说首要介绍了jQuery完结冻结表头的主意,实例解析了jQuery扩充方法的兑现本事及定点表格样式的措施,供给的心上人能够参照下

 

 

正文实例讲述了jQuery完毕冻结表头的主意。分享给大家供我们参谋。具体如下:

前些时间做项目时候由于供给出示二个列表,然而由于数量太多在滚动的时候表头必须冻结住,所以就写了上边那么些本子(曾经在网络也找过相应的本子,但是有个别地道所以就和煦写了,但是如今出于品种唯有使用了表头的冻结,而不要求钦点列冻结所以如今不得不算个不完整的剧本,可是貌似的唯有必要表头冻结就能够利用了),今后先看看截图:

图片 1

如此那般完毕了表头的结霜,上面表体内容能够Infiniti制滚动

看下代码:

代码如下:

//为jquery扩大2个CloneTableHeader 方法
jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) {
//获取冻结表头所在的DIV,假使DIV已存在则移除
var obj = document.getElementById("tableHeaderDiv" tableId);
if (obj) {
jQuery(obj).remove();
}
var browserName = navigator.appName;//获取浏览器信息,用于末端代码区分浏览器
table组合表头的落真实情状势,jQuery达成冻结表头的方法。var ver = navigator.appVersion;
var browserVersion = parseFloat(ver.substring(ver.indexOf("MSIE") 5, ver.lastIndexOf("Windows")));
var content = document.getElementById(tableParentDivId);
var scrollWidth = content.offsetWidth - content.clientWidth;
var tableOrg = jQuery("#" tableId);//获取表内容
var table = tableOrg.clone();//克隆表内容
table.attr("id", "cloneTable");
//注意:须要将要冻结的表头放入thead中
var tableHeader = jQuery(tableOrg).find("thead");
var tableHeaderHeight = tableHeader.height();
tableHeader.hide();
var colsWidths = jQuery(tableOrg).find("tbody tr:first td").map(function() {
return jQuery(this).width();
});//动态获取每一列的上涨的幅度
var tableCloneCols = jQuery(table).find("thead tr:first td")
if (colsWidths.size() > 0) {//依据浏览器为冻结的表头宽度赋值(重假若分别IE八)
for (i = 0; i < tableCloneCols.size(); i ) {
if (i == tableCloneCols.size() - 1) {
if (browserVersion == 8.0)
tableCloneCols.eq(i).width(colsWidths[i] scrollWidth);
else
tableCloneCols.eq(i).width(colsWidths[i]);
} else {
tableCloneCols.eq(i).width(colsWidths[i]);
}
}
}
//创设冻结表头的DIV容器,并设置属性
var headerDiv = document.createElement("div");
headerDiv.appendChild(table[0]);
jQuery(headerDiv).css("height", tableHeaderHeight);
jQuery(headerDiv).css("overflow", "hidden");
jQuery(headerDiv).css("z-index", "20");
jQuery(headerDiv).css("width", "100%");
jQuery(headerDiv).attr("id", "tableHeaderDiv" tableId);
jQuery(headerDiv).insertBefore(tableOrg.parent());
}
如上正是欧洲经济共同体代码,现在看下怎么着采纳:

 

只需在页面中进入以下脚本

代码如下:

<script type="text/javascript">
jQuery(function() {
jQuery.fn.CloneTableHeader("tab1", "div1");
});
</script>
如此这般就足以了,传入表和表所在的DIV的ID就OK了,必须小心的是:要冻结的表头必须放入到thead中,不然不能够兑现冻结。

 

如上代码在IE6,7,八测试通过,FF和chrome会出现表头的小幅不标准的标题。

企望本文所述对大家的jQuery程序设计有所帮忙。

那篇小说首要介绍了jQuery实现冻结表头的法子,实例深入分析了jQuery扩充方法的兑现工夫及稳固表格样式的主意,要求的...

 1、效果图

贯彻方式

前些日子做项目时候由于要求出示2个列表,但是由于数量太多在滚动的时候表头必须冻结住,所以就写了下边那么些本子(曾经在英特网也找过相应的本子,不过多少地道所以就谐和写了,可是当前由于体系可是使用了表头的冷冻,而不必要钦命列冻结所以最近只得算个不完全的台本,不过貌似的只是须要表头冻结就足以选用了),今后先看看截图:

连锁小说

连带寻觅:

前几日看吗

搜寻本领库

回来首页

  • php数组随机排序达成格局
  • IDisposable接口
  • Java与微信不得不说的旧事——达成微信公众
  • SVG绘图(2) —— 渲染满天星辰,svg满天
  • 听别人讲jQuery图片元素网格布局插件,jquery网格布
  • 玖款绚烂基于jquery实现的使用及源码,玖款

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前者代码  正则表明式  Flex教程  WEB前端教程  

图片 2

一.  落到实处原理

重中之重思量依旧讲将表头做悬浮状,浮于表格内容的上方.能够行使js和css样式进行达成.

图片 3

帮客商量

2、html代码

二. 注意事项

要稳住好表格的幅度,那样子才不会有表数据和表头对应不等同难点的出现.

那样完结了表头的冻结,上边表体内容能够轻便滚动

编辑:www.mg4377.com 本文来源:table组合表头的落真实情状势,jQuery达成冻结表头

关键词: java相关 JavaScr... java技术