如何实现表格固定表头双向滚动 第2页

26    if(trs && trs.length > 0)
27    {
28        for(var i = 0; i < trs.length; i++)
29        {
30            var tr = trs[i];
31            tr.style.position = "absolute";
32            var arr = new Array(2);
33            arr[0] = tr;
34            arr[1] = tr.offsetTop;//alert(tr.offsetTop+"|"+tr.parentNode.offsetHeight);
35            arr[2] = tr.offsetTop + tr.parentNode.offsetHeight;
36            arrTrs[i] = arr;
37        }
38    }
39}
40window.onscroll = onScroll;
41window.onload = load;

代码略解：
window.onscroll = onScroll;
window.onload = load;        //增加事件
load函数负责初始化可浮动表头对象的列表
load里面的：
   arr[0] = tr;    //表头对象
   arr[1] = tr.offsetTop;// 表头原始位置
   arr[2] = tr.offsetTop + tr.parentNode.offsetHeight;//表格底部的位置
   tr.style.position = "absolute";//设置表头样式为浮动。 必须！否则不会有任何效果！
onScroll 里面负责处理滚动事件。
   if( (top > arr[0].offsetTop || arr[1] < arr[0].offsetTop) &&
    top < arr[2])
   {
    arr[0].style.top = top;
   }
//上面这句最重要。判断条件 不明白的话，慢慢琢磨吧

ok，就这么简单。。但效果很酷酷的啦

上一页  [1] [2]