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

javascript多表表头固定-1

2015-07-13 00:00 826 查看

上班的第一个工作竟然是做表头固定，弄了很久都没有弄出来，最后在各位大神的帮助下，有了最后的这个成果。（PS：经过IE11，FF，Chrome测试通过）

重点是：JS以及这个HTML前一部分。

对于这个如果有什么问题可以留言，我有时间就帮忙解答。

还有个在网上找了个很不错的资料，用JQuery的插件实现这个功能，地址是：http://www.cnblogs.com/smallsong/archive/2012/02/09/2343729.html

tableHeaderFlow.js文件：

/**
* Created by Yuechang on 14-1-13.
*/
//表格表头的自动浮动效果
var arrTrs = new Array();
function onScroll()
{
if(arrTrs && arrTrs.length > 0)
{
for(var i = 0; i < arrTrs.length; i++)
{
var arr = arrTrs[i];
//top：鼠标滚动的距离
var top =(document.documentElement && document.documentElement.scrollTop)?document.documentElement.scrollTop:document.body.scrollTop;
if( (top > arr[1]) && top < arr[2])
{
arr[0].style.position = "absolute"; //设置表头样式为浮动。
arr[0].style.top = top+"px";
}
else{
arr[0].style.position = "relative"; //清除表头浮动样式。
}
}
}
}
function load (className)
{
//获取可浮动表头列表
var trs = document.getElementsByClassName(className);
if(trs && trs.length > 0)
{
for(var i = 0; i < trs.length; i++)
{
var tr = trs[i];
var arr = new Array(3);
arr[0] = tr;                                                 //表头对象
arr[1] = tr.parentNode.parentNode.offsetTop;                 // 表格原始位置
arr[2] = arr[1] + tr.parentNode.parentNode.offsetHeight-30;  //表格底部的位置
arrTrs.push(arr);
}
}
}
window.onscroll = onScroll;

tableHeaderFlow.html文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.style1{width: 100px; }
.flowtitle{width:1000px;background: #0066bb; }
</style>
<script type="application/javascript" src="tableHeaderFlow.js"></script>
<script type="application/javascript">
window.onload = function(){
load("flowtitle");
}
</script>
</head>
<body>
<h1>表头固定</h1>
<table border="1"style="width: 1000px" cellpadding="0" cellspacing="0">
<tr class="flowtitle">
<th class="style1">1</th>
<th class="style1">2</th>
<th class="style1">3</th>
<th class="style1">4</th>
<th class="style1">5</th>
<th class="style1">6</th>
<th class="style1">7</th>
<th class="style1">8</th>
<th class="style1">9</th>
<th class="style1">10</th>
</tr>
此处省略N个<tr>....</tr>
<tr>
<td class="style1">1</td>
<td class="style1">2</td>
<td class="style1">3</td>
<td class="style1">4</td>
<td class="style1">5</td>
<td class="style1">6</td>
<td class="style1">7</td>
<td class="style1">8</td>
<td class="style1">9</td>
<td class="style1">10</td>
</tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html表头浮动 javascript表头浮动表头固定表头浮动

相关文章推荐

新的分享

章节导航