冻结表中的页脚

• 下载演示项目和源代码 - 1.5 Kb

引言

Excel的冻结窗格是一个用户友好的功能。 在David R Lewis的项目中，他为我们提供了一个很好的解决方案来冻结表格的表头和第一列。 我尝试寻找更多有用的功能。 冻结页脚是今天的讨论主题。 上述项目源代码提供了一个简单的HTML页面和一个HTC文件来演示如何实现它。

背景

当我们在表格底部有一行摘要时，我们希望将其与其他行进行比较。 当您滚动表格时，最好将其保持在表格底部。 根据David R Lewis的项目，我们需要在表格的Div对象外部添加一个HTC文件。 如果您想了解更多关于HTC的信息，可以参考MSDN:HTC 参考。 然后，您需要在摘要行之间添加<tfoot>和</tfoot>标签。 然后，为<foot>编写CSS样式以呈现冻结页脚。

使用代码

1. 在目标表格外部添加带有HTC文件的div标签。
2. 在要冻结的页脚行外部添加<tfoot>和</foot>标签。
3. 添加CSS样式。

这是冻结页脚的CSS代码

/* To provide fixed footer */
tfoot tr {
 top: expression(parentNode.parentNode.parentNode.TopOfFooter); /* IE5+ only */
 position: relative;
 z-index: 20;
}

这是HTC代码

<PUBLIC:COMPONENT>
<PUBLIC:property NAME="TopOfFooter" value="20" GET="getTopOfFooter" />
' -----------------------------------------------------------------------------
' Ejo write in 2005/7/30
' support freeze footer
'  mailto: ejo_lin@gocyberlink.com
' -----------------------------------------------------------------------------
<script language="VBScript">
option explicit
dim heightOfScrollBar
heightOfScrollBar = 20

function getTopOfFooter()
 '   parentNode.parentNode.parentNode.scrollTop
 ' + parentNode.parentNode.parentNode.offsetHeight
 ' - parentNode.parentNode.parentNode.scrollHeight
 ' - Height of scroll bar
 dim HeightBar
 ' check whether horizontal scroll bar exists
 if element.scrollWidth > element.offsetWidth then
  HeightBar = heightOfScrollBar
 else
  HeightBar = 0
 end if
 
 ' check, if height of table (plus height of horizontal
 ' scroll bar) is smaller than outside object,
 ' change top of footer row, or do NOT change it (keep it as 0)
 if element.offsetHeight + HeightBar <= element.scrollHeight then
  getTopOfFooter = element.scrollTop + element.offsetHeight_
                          - element.scrollHeight - HeightBar
 else
  getTopOfFooter = 0
 end if
end function
</script>
</PUBLIC:COMPONENT>

关注点

这是说明如何计算冻结行顶部位置的图示

Notice

这里有一个bug。 我不知道如何轻松解决它。 也就是说，我不知道如何获取客户端浏览器的水平滚动条的高度。 如果此值错误，可能会导致无限循环。 也许，您有相关的经验。 如果您有任何解决方案，请告诉我。