awen7916
- 浏览: 276982 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (208)
- Oracle (21)
- webservice (7)
- java (33)
- java序列化反序列化 (0)
- weblogic (4)
- ajaxFileUpload (2)
- uploadify (1)
- jquery (7)
- MAXIMO (4)
- smartgit (1)
- css (3)
- POI (1)
- photoshop (0)
- linux (1)
- highchart 动态添加数据 (0)
- highchart (5)
- json (7)
- spring (11)
- maven (10)
- app (7)
- ASCII (1)
- mysql (26)
- excel (1)
- tomcat (3)
- bootstrap (1)
- ztree (2)
- dubbo (4)
- nginx (5)
- hadoop (3)
- osgi (3)
- ext (2)
- cxf (4)
- hibernate (1)
- 协议 (1)
- axis2 (1)
- javascript (2)
- vue (2)
- EhCache (2)
- Quartz (1)
- sqlite (1)
- saas (0)
- ionic (1)
- developer (1)
- maven 常用命令 (1)
- eclipse (1)
- mac (2)
- mongoldb (1)
- svn (1)
最新评论
-
wyb243：
大家千万不要按照这个写！！！PreparedStatement ...
JdbcTemplate插入后获取自增ID -
北雁南飞33：
有源码分享吗
自定义分页标签结合spring mvc、bootstrap、mybatis、mysql的使用 -
xcg992224：
大哥 不需要手动调用回收 是你在for的里面不应该每次都去ne ...
Java 垃圾回收测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="./js/jquery-1.3.2.js"></script>
<style>
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #5CB8E6;
border-collapse: collapse;
}
table.gridtable thead tr th {
border-width: 1px;
padding: 8px;
font-size:1.1em;
font-weight:bold;
text-align:left;
color:#FFFFFF;
border-style: solid;
border-color: #5CB8E6;
background-color: #5CB1E7;
}
table.gridtable thead tr td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #5CB8E6;
background-color: #F0FAFF;
}
table.gridtable tbody tr td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #5CB8E6;
background-color: #ffffff;
}
</style>
<script type="text/javascript">
/*
* Auther:Mike.Jiang
* Email: dataadapter@hotmail.com
* Date: 2012-09-05
*/
/*
主要思想：
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
*/
(function ($) {
$.fn.extend({
FixedHead: function (options) {
var op = $.extend({ tableLayout: "auto" }, options);
return this.each(function () {
var $this = $(this); //指向当前的table
var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去
$thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV
var x = $thisParentDiv.position();
var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>")
.insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头
.css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top });
var $thisClone = $this.clone(true);
$thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中
$thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中
$this.css({ "marginTop": 0, "table-layout": op.tableLayout });
//当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV
$thisParentDiv.scroll(function () {
fixedDiv[0].scrollLeft = $(this)[0].scrollLeft;
});
//因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题
//下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头
var $fixHeadTrs = $thisClone.find("thead tr");
var $orginalHeadTrs = $this.find("thead");
$fixHeadTrs.each(function (indexTr) {
var $curFixTds = $(this).find("td");
var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")");
$curFixTds.each(function (indexTd) {
$(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width());
});
});
});
}
});
})(jQuery);
$(document).ready(function () {
$("#tbTest").FixedHead({ tableLayout: "fixed" });
});
</script>
</head>
<body>
<div style="height: 200px; width: 100%; overflow: auto;">
<table id="tbTest" class="gridtable" style="width:100%;">
<col width="10%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="10%" />
<thead>
<tr>
<th colspan="6">
项目
</th>
</tr>
<tr>
<td style="width: 10%;">
项目
</td>
<td colspan="2">
常规性税金
</td>
<td colspan="2">
非常规性税金
</td>
<td style="width: 10%;">
工程税
</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 10%;">
0.2
</td>
<td>
11111111111111111.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="./js/jquery-1.3.2.js"></script>
<style>
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #5CB8E6;
border-collapse: collapse;
}
table.gridtable thead tr th {
border-width: 1px;
padding: 8px;
font-size:1.1em;
font-weight:bold;
text-align:left;
color:#FFFFFF;
border-style: solid;
border-color: #5CB8E6;
background-color: #5CB1E7;
}
table.gridtable thead tr td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #5CB8E6;
background-color: #F0FAFF;
}
table.gridtable tbody tr td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #5CB8E6;
background-color: #ffffff;
}
</style>
<script type="text/javascript">
/*
* Auther:Mike.Jiang
* Email: dataadapter@hotmail.com
* Date: 2012-09-05
*/
/*
主要思想：
1>将原有的TABLE中的THEAD元素复制一份放在一个新的DIV(fixedheadwrap)中
2>设置这个fixedheadwrap为绝对位于原来的TABLE的THEAD位置
*/
(function ($) {
$.fn.extend({
FixedHead: function (options) {
var op = $.extend({ tableLayout: "auto" }, options);
return this.each(function () {
var $this = $(this); //指向当前的table
var $thisParentDiv = $(this).parent(); //指向当前table的父级DIV，这个DIV要自己手动加上去
$thisParentDiv.wrap("<div class='fixedtablewrap'></div>").parent().css({ "position": "relative" }); //在当前table的父级DIV上，再加一个DIV
var x = $thisParentDiv.position();
var fixedDiv = $("<div class='fixedheadwrap' style='clear:both;overflow:hidden;z-index:2;position:absolute;' ></div>")
.insertBefore($thisParentDiv)//在当前table的父级DIV的前面加一个DIV，此DIV用来包装tabelr的表头
.css({ "width": $thisParentDiv[0].clientWidth, "left": x.left, "top": x.top });
var $thisClone = $this.clone(true);
$thisClone.find("tbody").remove(); //复制一份table，并将tbody中的内容删除，这样就仅余thead，所以要求表格的表头要放在thead中
$thisClone.appendTo(fixedDiv); //将表头添加到fixedDiv中
$this.css({ "marginTop": 0, "table-layout": op.tableLayout });
//当前TABLE的父级DIV有水平滚动条，并水平滚动时，同时滚动包装thead的DIV
$thisParentDiv.scroll(function () {
fixedDiv[0].scrollLeft = $(this)[0].scrollLeft;
});
//因为固定后的表头与原来的表格分离开了，难免会有一些宽度问题
//下面的代码是将原来表格中每一个TD的宽度赋给新的固定表头
var $fixHeadTrs = $thisClone.find("thead tr");
var $orginalHeadTrs = $this.find("thead");
$fixHeadTrs.each(function (indexTr) {
var $curFixTds = $(this).find("td");
var $curOrgTr = $orginalHeadTrs.find("tr:eq(" + indexTr + ")");
$curFixTds.each(function (indexTd) {
$(this).css("width", $curOrgTr.find("td:eq(" + indexTd + ")").width());
});
});
});
}
});
})(jQuery);
$(document).ready(function () {
$("#tbTest").FixedHead({ tableLayout: "fixed" });
});
</script>
</head>
<body>
<div style="height: 200px; width: 100%; overflow: auto;">
<table id="tbTest" class="gridtable" style="width:100%;">
<col width="10%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="10%" />
<thead>
<tr>
<th colspan="6">
项目
</th>
</tr>
<tr>
<td style="width: 10%;">
项目
</td>
<td colspan="2">
常规性税金
</td>
<td colspan="2">
非常规性税金
</td>
<td style="width: 10%;">
工程税
</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 10%;">
0.2
</td>
<td>
11111111111111111.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
<tr>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
<td>
0.2
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
分享到：
发表评论
-
jquery.validate
2015-07-22 19:20 1312主要分几部分jquery.validate 基本用法jqu ... -
jquery 调用iframe页面中js的方法 兼容Ie,FF,chore浏览器
2015-06-23 22:33 894iframefunction()是子页面的方法 $(wi ... -
jQuery Validate验证框架详解
2015-06-16 15:32 643jQuery Validate验证框架详解 jQuery校 ... -
table固定表头v3
2015-05-13 14:18 673<!DOCTYPE html PUBLIC " ... -
table固定表头
2015-04-17 15:31 1285<!DOCTYPE html PUBLIC " ... -
js与jquery获得页面大小、滚动条位置、元素位置
2015-04-09 09:01 607//页面位置及窗口大小 function GetPageSi ...
相关推荐
移动端项目，移动端table固定表头与固定第一列,HTML5和css3
移动端项目，移动端table固定表头与固定第一列,HTML5和css3
js table 固定表头
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定...2.0 增加 window.onresize事件监听（当触发 window.onresize时自动重新固定表头） 增加左边固定位置鼠标滚轮事件
Jquery table固定表头,固定列,全浏览器兼容 Jquery table固定表头,固定列,全浏览器兼容
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Fixed Header Table 固定表头 插件
table表格固定表头与固定列的源代码，用css样式来设置，只支持ie系统浏览器
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
html+ table 固定表头和左侧列，可以直接套用在asp.net中，非常方便好用。
table 固定指定的列 以及表头 有实现例子
table的表头固定，用的是一个TABLE
两个例子table固定表头，用css实现，表头固定不动，表格内容随滚动条变化
js固定表头和第一列固定，内容变化
Table 表头固定，当下拉条滚动时,表头一直停留在页面顶部固定不动
用css实现的固定表头示例：表头固定不动，表格内容随滚动条变化。
js table固定表头,固定列,全浏览器兼容，IE支持IE8以上的浏览器。
固定表头和列头
NULL 博文链接：https://ado88.iteye.com/blog/437305
固定table表头的插件.zip