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

最新推荐文章于 2024-12-24 13:11:47 发布

最新推荐文章于 2024-12-24 13:11:47 发布 · 1.1k 阅读

文章标签：

#Excel #JSP #JavaScript #Cache #HTML #ViewUI

JSP 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种在网页中使用JavaScript实现表格滚动时保持表头固定的方法。通过简单的代码即可让表格在滚动时始终保持表头可见，提升用户体验。

在做数据展示时，出阿里的数据好多，分页后，由于页面显示的范围比较小，数据太少有不太方便，这是就出现了滚动条，可是在滚动条滚动时 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>