`
younglibin
  • 浏览: 1194939 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

固定（冻结 ）table第一行的列名

    博客分类：
  • JSP
ExcelJSPJavaScriptCacheHTML 
阅读更多

在做数据展示时，出阿里的数据好多，分页后，由于页面显示的范围比较小，数据太少有不太方便，这是就出现了 滚动条 ，可是在滚动条 滚动时  table 的第一列 标题 也就随着滚动没了，有时数据就不知道指的是那个了。

想想 excel 中可以 冻结表头 ，这样养 滚动时 ，表头 上的说明还是可以看见 ，比较人性化了，一同事实现了该功能 哪来 晒晒：

 

实现的核心 代码：

<script type="text/javascript">
	function   fixupFirstRow(tab) {   
    		var   div   =   tab.parentNode;   
    		if(div.className.toLowerCase()   ==   "freezediv"){   
	          tab.rows[0].style.zIndex   =   "1";   
	          tab.rows[0].style.position   =   "relative";   
	          div.onscroll   =   function()   
	          {   
	              var   tr   =   tab.rows[0];   
	              tr.style.top   =   this.scrollTop   -   (this.scrollTop==0   ?   1   :   2);   
	              tr.style.left   =   -1;   
	          } 
	            
   			 }   
  	} 
  	
  	window.onload   =   function(){   
        var   tab   =   document.getElementById("freezedivTable"); 
          
        if(tab){
           fixupFirstRow(tab);
           }   
      }   
	
	</script>

 

 

以上 代码就实现了 冻结标题 的功能，这里注意下 table 的id  和 div 的 id 就可以了！

全部页面：

 

下边是一个Jsp页面 代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript">
	function   fixupFirstRow(tab) {   
    		var   div   =   tab.parentNode;   
    		if(div.className.toLowerCase()   ==   "freezediv"){   
	          tab.rows[0].style.zIndex   =   "1";   
	          tab.rows[0].style.position   =   "relative";   
	          div.onscroll   =   function()   
	          {   
	              var   tr   =   tab.rows[0];   
	              tr.style.top   =   this.scrollTop   -   (this.scrollTop==0   ?   1   :   2);   
	              tr.style.left   =   -1;   
	          } 
	            
   			 }   
  	} 
  	
  	window.onload   =   function(){   
        var   tab   =   document.getElementById("freezedivTable"); 
          
        if(tab){
           fixupFirstRow(tab);
           }   
      }   
	
	</script>

  </head>
  
  <body>

    
    
<div class=freezediv   style="width:   100%;   height:   140;   overflow:   auto;">   
<table id=freezedivTable >

	
	 	<tr>
        	<th nowrap="nowrap">序号</th>        	
        	<th nowrap="nowrap">内容</th>
		</tr>
		<tr>
        	<th nowrap="nowrap">序号</th>        	
        	<th nowrap="nowrap">内容</th>
		</tr>
		<tr>
			<td>1</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>2</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>3</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>4</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>5</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>6</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>7</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>8</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>9</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>10</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>11</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>12</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>13</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>14</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>15</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>16</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>17</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>18</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>19</td>
			<td>内容</td>
		</tr>
		<tr>
			<td>20</td>
			<td>内容</td>
		</tr>
    
	</table>
	</div>	
  </body>
</html>

 

 

0
顶
0
踩
分享到：
| 图片 的超链接带边框
评论
3 楼 xingmei_ok 2013-07-30  
  亲自试了一下，没有冻结啊。。
2 楼 younglibin 2009-12-25  
是那种 说出来！不说咋知道........
1 楼 yilong511 2009-12-25  
阿里的不是这种做法哦
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics