Sugo

Goof off ? no way: never
posts - 20, comments - 8, trackbacks - 73, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

html表格表头随着鼠标上下移动

Posted on 2007-01-24 18:53 sugo 阅读(1496) 评论(0)  编辑  收藏

      报表中有这个需求,当报表很大需要下拉时,但表头在正上方,看不到对应的是哪一项的数据。此功能可以使用虚拟一个表头来实现。具体的灵感来自网站随着鼠标移动的图片。当鼠标下移时,图片跟着走。对于这个需求来说只需把图片换成一个表格即可。
       网页中加入如下代码:
      <DIV id="thead" style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-980); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-500); TEXT-ALIGN: center">
<TABLE cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD>
<EMBED style="LEFT: -73px; POSITION: absolute; TOP: 125px" align=right>
<table bgcolor="red"  border=1>
<tr>
<td>sdfsd</td><td>sdfsd</td><td>sdfsd</td>
</tr>
</table>
</EMBED>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
       红色代码部分可以更替为任意html标记,比如img、input等等。
       注:内嵌的表格颜色最好深一些,不然会出现重叠现象。调整虚拟表头相对屏幕上方的位置在蓝色粗体的地方,可根据需要修改。
       当需要打印报表时,可以添加一个button来控制这个表头的显示 js方法为
       function control(){ 
         var temp=document.getElementById("thead");
          if(temp.style.display=='none')
              temp.style.display='' ;
          else
              temp.style.display='none';
       }


只有注册用户登录后才能发表评论。


网站导航: