Posted on 2007-01-24 18:53
sugo 阅读(1505)
评论(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';
}