javascript表头固定-2
2015-07-13 00:00
393 查看
感觉前一个js还是有点不怎么完善,还有其中的这种情况没有考虑进去-------表格被撑大时,表头不会对应发生变化。不过,还是稍稍会有点偏移(1-2个像素),不是非常完美。
下面贴出第二个版本:(此时每一次调用只能固定一个表头)
tableHeaderFlow.js文件:
而与之对应的
tableHeaderFlow.html文件:
版权声明:本文为博主原创文章,未经博主允许不得转载。
下面贴出第二个版本:(此时每一次调用只能固定一个表头)
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>
版权声明:本文为博主原创文章,未经博主允许不得转载。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 异步流程控制:7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象
- javascript asp教程创建数据库连接
- javascript asp教程错误处理
- javascript asp教程第十课--global asa