用JAVASCRIPT实现固定指定行、指定列

 
一个页面如果内容太多了就会出现滚动条,我们可以通过上下,左右移动滚动条来看页面的内容,这样很方便也很实用,但是,如果这个页面中有些内容特别地重要,它必需显示出来,应该怎么办了,这个时候我们都会想到通过固定行,和列来实现这样的效果.如图所示:

我通过拉动左右滚动条,序号列和选择列不动,其它列动,通过拉动上下滚动条,深蓝色的行不动,下面的行都动.这样的效果是相当不错的,可惜等我找到的时候发现这个功能已经封装成了控件了.我跟本看不到它是如何实现的.一气之下去网上各大论坛问高手,可是等了一天都没有等到结果.哎,无奈之下,只有自己动手去研究了.
       我们来分析一下,网页的内容全都在一个表格之内,要想让表格的某个行或列不动,想想是不可能的,但是我们考虑到了页面布局中还有个相对的概念吗?如果我们能够让它的一行或一列相对某个容器不动,而让其它的列或行动,这不就实现了.
所以我可以建一个层来包含一个table
代码如下: <div  id='div_dgTittle3' style=' HEIGHT:400px;WIDTH:600px;OVERFLOW:auto; ' >
<table>内容</table>
内容…..
</div>
注意这里,因为我要让两边都出现滚动条,所以宽度和高度都得控制具体值.有了这个层容器,我们就可以在样式中设置一个相对的关系position:relative;
样式代码如下:
用于控制列不动的样式
.FreezingCol_th
    {
    LEFT: expression(document.getElementById('div_dgTittle3').scrollLeft-1);
     POSITION: relative;
z-index:1000;
       }
用于控制行不动的样式
.Freezing_tdd
{

  top:expression(document.getElementById('div_dgTittle3').scrollTop-1);
    position:relative ;
   
}
也许有人会问,为什么第二个样式多了个控制层深度的,其实第一个也有,只是默认的,没有写出来,但是这确实是一个问题,如果我拖动左右滚动条,则某列不动,其它列动,其它列一定得在固定列的下方,不然固定列就会被覆盖,所以这个时候应该是固定列的层级关系更大,它z-index应该大不固定列的.当然拖动上下滚动条也是一样的.这里就不多说了,但是也许有人会问,scrollTop是什么作用,如果说学JAVASCRIPT这个都不知道的话,那你应该快点去查下资料,这里我提供一个资料点http://www.xrend.com/html/diannaojichu/JavaScript/200809/24-2985.html,也许对你有帮助.这我就不多讲了,如果对CSS中的expression的用法还是不很熟悉的朋友也可以参考下这里的资料, http://www.xrend.com/html/diannaojichu/DIV-CSS/200809/24-2986.html当然,这里是为了要实现一种作用才用expression的,因为expression最好不要用,大家可以去这里看看为什么http://www.xrend.com/html/diannaojichu/DIV-CSS/200809/24-2987.html .看完这些以后,你是否已经明白了好多.也许只有亲自动手才能学到更多,确实如此,因为只有动手才能发现更多的问题.
我觉得大家还是亲自己动手去试下才会掌握好,这里我就不贴代码了.
希望对大家有所帮助

转载自:IT起步网 http://www.xrend.com/