<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"; //IE7支持不好,IE8 不支持
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>
<%@ 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>
源:http://younglibin.iteye.com/
分享到：
相关推荐
标题中的“点击table首行列名按该列内容排序+冻结窗口”是指在处理表格数据时，用户能够通过点击表格的第一行（通常是表头）来实现数据的排序，并且可以固定（冻结）窗口的一部分，以便在滚动查看大量数据时始终保持...
以上代码将冻结前两列，即表头和第一列。如果只需要冻结表头，可以设置`freezeColumns`为0。 此插件可能包含的配置选项还有： - `freezeColumns`: 冻结的列数，如果不设置或设置为0，则只冻结表头。 - `...
在Web开发中，表格（Table）是展示数据的常用元素，但如何实现表格的固定行和列是一项常见的需求。这通常涉及到CSS样式控制，以便在滚动时保持特定行或列始终可见，提升用户浏览大量数据时的体验。下面将详细探讨...
描述中提到“修改了第一版中的一些bug”，意味着这个解决方案已经经过了迭代优化，能够更好地兼容各种浏览器，包括IE5到IE11以及FireFox和Chrome，这涵盖了大部分用户的常用浏览器。 "FreezingGridPlugin.js"这个...
18. **DeleteSpecificRow**: `CurrentTable.Rows.RemoveAt(index)` 删除特定位置的行，如第一行。 19. **ClearAllRows**: `For Each dr As DataRow In CurrentTable.Rows` 循环遍历并删除所有行。 20. **...
其中`fieldName`代表要合并的列名，`index`指明当前操作所在的行，`flag`是一个布尔值，用来判断是读取还是写入表格数据。 函数首先根据`index`的值决定当前行是在常规列还是在冻结列中，之后通过jQuery选择器选取...
11. **删除行**：`Delete()` 方法可以删除指定索引的行，如 `DataTables("订单").DataRows(0).Delete()` 删除第一行，返回值表示操作是否成功。 12. **重新加载行**：`Load()` 方法用于重新加载行数据，例如 `...
5. 修改表：alter table <表名> [ add <新列名> <数据类型> [ 完整性约束 ] ] [ drop <完整性约束名> ] [ alter column <列名> <数据类型> ] 6. 创建视图：create view 视图（） 本资源提供了office软件的使用技巧...
- **Third Party File Based Source Control**：介绍了第三方基于文件的源代码控制方法。 - **Team Coding**：讲解了团队编码的使用方法。 - **Status in the Editor Status Bar or Team Coding Viewer Status ...