`
younglibin
  • 浏览: 1214428 次
  • 性别: 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  
阿里的不是这种做法哦
发表评论

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

相关推荐

    点击table首行列名按该列内容排序+冻结窗口

    标题中的“点击table首行列名按该列内容排序+冻结窗口”是指在处理表格数据时，用户能够通过点击表格的第一行（通常是表头）来实现数据的排序，并且可以固定（冻结）窗口的一部分，以便在滚动查看大量数据时始终保持...

    table冻结表头

    以上代码将冻结前两列，即表头和第一列。如果只需要冻结表头，可以设置`freezeColumns`为0。 此插件可能包含的配置选项还有： - `freezeColumns`: 冻结的列数，如果不设置或设置为0，则只冻结表头。 - `...

    table固定行和列

    在Web开发中，表格（Table）是展示数据的常用元素，但如何实现表格的固定行和列是一项常见的需求。这通常涉及到CSS样式控制，以便在滚动时保持特定行或列始终可见，提升用户浏览大量数据时的体验。下面将详细探讨...

    单行或多行复杂的固定(冻结)表头的完美解决方案第二版

    描述中提到“修改了第一版中的一些bug”，意味着这个解决方案已经经过了迭代优化，能够更好地兼容各种浏览器，包括IE5到IE11以及FireFox和Chrome，这涵盖了大部分用户的常用浏览器。 "FreezingGridPlugin.js"这个...

    Foxtable常用代码汇总.pdf

    18. **DeleteSpecificRow**: `CurrentTable.Rows.RemoveAt(index)` 删除特定位置的行，如第一行。 19. **ClearAllRows**: `For Each dr As DataRow In CurrentTable.Rows` 循环遍历并删除所有行。 20. **...

    layui数据表格跨行自动合并的例子

    其中`fieldName`代表要合并的列名，`index`指明当前操作所在的行，`flag`是一个布尔值，用来判断是读取还是写入表格数据。 函数首先根据`index`的值决定当前行是在常规列还是在冻结列中，之后通过jQuery选择器选取...

    Foxtable常用代码汇总.doc

    11. **删除行**：`Delete()` 方法可以删除指定索引的行，如 `DataTables("订单").DataRows(0).Delete()` 删除第一行，返回值表示操作是否成功。 12. **重新加载行**：`Load()` 方法用于重新加载行数据，例如 `...

    office与SQL语句学习.doc

    5. 修改表：alter table &lt;表名&gt; [ add &lt;新列名&gt; &lt;数据类型&gt; [ 完整性约束 ] ] [ drop &lt;完整性约束名&gt; ] [ alter column &lt;列名&gt; &lt;数据类型&gt; ] 6. 创建视图：create view 视图（） 本资源提供了office软件的使用技巧...

    最完整的Toad For Oracle使用手册

    - **Third Party File Based Source Control**：介绍了第三方基于文件的源代码控制方法。 - **Team Coding**：讲解了团队编码的使用方法。 - **Status in the Editor Status Bar or Team Coding Viewer Status ...

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