javascript表头固定-2

来源：互联网发布：许嵩所有歌曲知乎编辑：程序博客网时间：2024/05/21 17:02

感觉前一个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>

0 0