现在位置: 首页 > 博客文章 > 电脑相关 > IT开发 > 开发语言 > Web > 正文
JSP画面中table表头的冻结
2013年11月05日 12:37:40 Web ⁄ 共 1133字 暂无评论 ⁄ 被围观 3,048次

问题描述:如何在 Jsp 中冻结表格,就想 Excel 中一样,将第一排冻住,然后下拉也不会滚动。也就是说当表格行数很多的时候,如果有滚动条,只滚动表格里面的数据,表头那一行不滚动,永远固定在顶部。

解决办法:

1. 用 3 个 div 来实现。

  1. <div id='table'>  
  2.   
  3. <div id='title'>这里写表头可以用一个表格</div>  
  4.   
  5. <div id='content'>这里写表体,可以用另外一个表格</div>  
  6.   
  7. </div>  

注意:需要写一个 css 样式进行控制。

2. 很多 table 固定表头的思路,大多都是将表头和内容放在两个 table 里来处理的,表头和数据放在两个 table 中,第二个 table 放在 div 里面!

但有没有将表头和内容放在一个 table里来实现固定表都的方法呢?因为放在两个 table 时,但很难控制列的对齐,当表体内容多而生成滚动条时,表头和标题的列对不齐了。

表头和详细数据分别放在两个  table中,然后才放在最外层 table 中。 如果明细中出现数据超长时明细表格发生变形,头部表格不会跟着变化。所以变得不能对齐。

方法是可以对明细表的第一行加 id:dtRow,对 head 表中的行加 id:headRow。js:onload时加载执行:“headRow 的所有 td 子节点的宽度 = dtRow 的所有 td 子节点的宽度”。

3. 用一个 table 也可以实现,但需要 js 来控制。

  1. 例子:  
  2. window.onload = function() {   
  3.     var tab = document.getElementById("tableId");  
  4.     if (tab) {  
  5.         fixRow(tab);  
  6.     }  
  7. }  
  8.   
  9. function fixRow(tab) {  
  10.     var div = tab.parentNode;  
  11.     if (div.className.toLowerCase() == "freezediv") {  
  12.         tab.rows[0].style.zIndex = "1";  
  13.         tab.rows[0].style.position = "relative";  
  14.         div.onscroll = function() {  
  15.             var tr = tab.rows[0];  
  16.             tr.style.top = this.scrollTop - (this.scrollTop == 0 ? 1 : 2);  
  17.             tr.style.left = -1;  
  18.         }  
  19.     }  
  20. }  

给我留言

留言无头像?