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

javascript表头固定-2

2014-01-14 11:11 204 查看
感觉前一个js还是有点不怎么完善，还有其中的这种情况没有考虑进去-------表格被撑大时，表头不会对应发生变化。不过，还是稍稍会有点偏移（1-2个像素），不是非常完美。

下面贴出第二个版本：（此时每一次调用只能固定一个表头）

tableHeaderFlow.js文件：

/**
* Created by Yuechang on 14-1-14.
* Version 2.0
* 代码作用：表格表头的浮动效果
*/
function onScroll(className)
{
//获取可浮动表头列表
var trObj = document.getElementsByClassName(className)[0];         //表头对象（tr）
if(trObj)
{
//top：鼠标滚动的距离
var top =(document.documentElement && document.documentElement.scrollTop)?document.documentElement.scrollTop:document.body.scrollTop;

var tableObj = trObj.parentNode.parentNode;                    //表格对象
var tableOldPostion = tableObj.offsetTop;                      //表格原始位置
var tdHeight = trObj.offsetHeight;                             //表头对象的高度
var tableFootPostion=tableOldPostion+tableObj.offsetHeight-tdHeight;//表格底部位置

trObj.style.position="absolute";                               //设置表头样式。
trObj.style.width = tableObj.offsetWidth + "px";               //设置表头宽度
trObj.style.left = tableObj.offsetLeft + "px";                 //设置表头左偏移
trObj.style.border = "1px";

//如果，鼠标滚动的距离大于表格的原始位置，并且鼠标滚动的距离小于表格的底部
if( top > tableOldPostion && top < tableFootPostion)
{
trObj.style.top = top+"px";
}
else{//如果表格回到原始位置，设置表格的绝对高度为表格的原始高度
trObj.style.top = tableOldPostion-tdHeight+2+"px";
}

var tbodyObj = trObj.parentNode;    //tbody对象
var trsObj = tbodyObj.children;     //tbody的孩子集合对象
var secondTrObj = tableObj.rows[1];//tbody的第二个孩子，tr对象(非标题行)
//tbodyObj.removeChild(tbodyObj.child(1));
/**
* 问题重现：如果表格中文字过长会将表格撑大，导致表头各项与表格各项不对应
* 解决办法：重新设置表头样式，将表格中各项的宽度对应赋给表头
*/
for(var i =0 ; i<trObj.cells.length;i++)
{
trObj.cells.item(i).style.width = secondTrObj.cells.item(i).offsetWidth+"px";
}
}
}


而与之对应的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{background: #0066bb; }
.flowtitle2{background:greenyellow; }
</style>
<script type="application/javascript" src="demo7.js"></script>
<script type="application/javascript">
window.onscroll = function(){
onScroll("flowtitle");
onScroll("flowtitle2");
}
</script>
</head>
<body>
<br> <br> <br> <br><br> <br> <br> <br><br> <br> <br> <br><br> <br> <br> <br><br> <br> <br> <br><br> <br> <br> <br><br> <br> <br> <br>
<h1>hello</h1>
<table border="1" 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>
</div>
<br>
<table border="1"style="width: 1000px" cellpadding="0" cellspacing="0">
<tr class="flowtitle2">
<th class="style1">11</th>
<th class="style1">21</th>
<th class="style1">31</th>
<th class="style1">41</th>
<th class="style1">51</th>
<th class="style1">61</th>
<th class="style1">71</th>
<th class="style1">81</th>
<th class="style1">91</th>
<th class="style1">101</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航