JavaScript：固定table的表头
当表格数据很多，以致于容器块元素出现滚动条。而在滚动滚动条的时候，数据行会被块元素遮挡。若要保持表格的head部分始终在可视范围内，我们需要对表头进行特殊的样式设置。下面的jsp代码可以实现表头固定，经过测试可以直接使用。在IE浏览器下，拉动滚动条时表头会抖动，在谷歌下确实很流程，估计是浏览器的兼容性问题。
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>固定表头</title>
</head>
<style>
#box{
height:214px;
width:500px;
overflow-y:auto;/** 必须，否则当表格数据过多时，不会产生滚动条，而是自动延长该div的高度 */
position:relative;/** 必须，若不设置，拷贝得来的表头将相对于其设置该属性为该值的父节点（或间接父节点）定位，如果没有，则相对于body */
}
table,tr,td,th{
border:1px solid #ccd;
border-collapse:collapse;
}
table{
width:100%;
}
td{
height:24px;
width:50px;/** 固定单元格宽度，防止分离表头后，表头与数据行错位（缺点） */
line-height:24px;
padding:3px 5px;
background-color:#ddd;
word-break:break-all;/** 设置当文本过长时换行 */ } th{
height:24px;
width:50px;/** 不管是固定像素或是百分比，应与对应数据列的宽度一致 */
line-height:24px;
background-color:#cfc;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
/**
* 功能：固定表头（核心方法）
* 参数 viewid 表格的id
* scrollid 滚动条所在容器的id
* size 表头的行数（复杂表头可能不止一行）
*/
function scroll(viewid,scrollid,size){
// 获取滚动条容器
var scroll = document.getElementById(scrollid);
// 将表格拷贝一份
var tb2 = document.getElementById(viewid).cloneNode(true);
// 获取表格的行数
var len = tb2.rows.length;
// 将拷贝得到的表格中非表头行删除
for(var i=tb2.rows.length;i>size;i--){
// 每次删除数据行的第一行
tb2.deleteRow(size);
}
// 创建一个div
var bak = document.createElement("div");
// 将div添加到滚动条容器中
scroll.appendChild(bak);
// 将拷贝得到的表格在删除数据行后添加到创建的div中
bak.appendChild(tb2);
// 设置创建的div的position属性为absolute，即绝对定于滚动条容器（滚动条容器的position属性必须为relative）
bak.style.position = "absolute";
// 设置创建的div的背景色与原表头的背景色相同（貌似不是必须）
bak.style.backgroundColor = "#cfc";
// 设置div的display属性为block，即显示div（貌似也不是必须，但如果你不希望总是显示拷贝得来的表头，这个属性还是有用处的）
bak.style.display = "block";
// 设置创建的div的left属性为0，即该div与滚动条容器紧贴
bak.style.left = 0;
// 设置div的top属性为0，初期时滚动条位置为0，此属性与left属性协作达到遮盖原表头
bak.style.top = "0px";
// 给滚动条容器绑定滚动条滚动事件，在滚动条滚动事件发生时，调整拷贝得来的表头的top值，保持其在可视范围内，且在滚动条容器的顶端
scroll.onscroll = function(){
// 设置div的top值为滚动条距离滚动条容器顶部的距离值
bak.style.top = this.scrollTop+"px";
}
} // 在页面加载完成后调用该方法
window.onload = function (){
scroll("tab","box",1);
}
//-->
</SCRIPT>
<body>
<div id="box">
<table id="tab">
<tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th><th>户籍</th><th>身份</th></tr>
<tr><td>1</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>
<tr><td>2</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>
<tr><td>3</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>
<tr><td>4</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>
<tr><td>5</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>
<tr><td>6</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>
<tr><td>7</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>
<tr><td>8</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>
<tr><td>9</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>
<tr><td>10</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>
<tr><td>11</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>
<tr><td>12</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>
<tr><td>13</td><td>唐三藏</td><td>男</td><td>30</td><td>长安</td><td>佛</td></tr>
<tr><td>14</td><td>孙悟空</td><td>男</td><td>1000</td><td>花果山</td><td>佛</td></tr>
<tr><td>15</td><td>猪悟能</td><td>男</td><td>700</td><td>高老庄</td><td>使者</td></tr>
<tr><td>16</td><td>沙悟净</td><td>男</td><td>680</td><td>流沙河</td><td>罗汉</td></tr>
<tr><td>17</td><td>观世音</td><td>不详</td><td>10000</td><td>珞珈山</td><td>尊者</td></tr>
<tr><td>18</td><td>玉皇大帝</td><td>男</td><td>1000000</td><td>凌霄殿</td><td>皇帝</td></tr>
<tr><td>19</td><td>太上老君</td><td>男</td><td>8000</td><td>离恨天</td><td>道尊</td></tr>
<tr><td>20</td><td>哪吒</td><td>男</td><td>570</td><td>陈塘关</td><td>神</td></tr>
<tr><td>21</td><td>女儿国国王</td><td>女</td><td>28</td><td>女儿国</td><td>皇帝</td></tr>
<tr><td>22</td><td>白骨精</td><td>女</td><td>790</td><td>白骨洞</td><td>妖</td></tr>
<tr><td>23</td><td>地藏王</td><td>男</td><td>80000</td><td>幽冥界</td><td>菩萨</td></tr>
<tr><td>24</td><td>嫦娥</td><td>nv</td><td>3000</td><td>广寒宫</td><td>仙</td></tr>
</table>
</div>
</body>
</html>
JavaScript：固定table的表头的更多相关文章
- (转)supertable像excel那样固定table的表头和第一列
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...
- 固定table的表头同时固定列
table表格是我们最常使用的数据显示一种形式,但有时候数据比较多的时候 就需要我们去固定表头,固定列.我这里用简单的css样式配合两句js脚本来实现,希望能够去帮到你. <div class= ...
- bootstrap中固定table的表头
前端时间鼓捣的一个简单的手机站点,今天又拿出来弄一弄 由于主要是给手机訪问.用的是bootstrap响应式布局,今天的任务是做一个数据展示页面 可是因为数据的列比較多.所以横向显示不下,为了较好的显示 ...
- asp.net table表格表头及列固定实现
http://blog.csdn.net/zdw_wym/article/details/48630337 在开发中常会遇到table表格中列特别多,下拉后,表头就看不见了,水平滚动后,第1.2列就看 ...
- js Table冻结表头示例代码
Table冻结表头的js实现代码. Table冻结表头: <script type="text/javascript"> //冻结table的表头 function ...
- Javascript 固定表格表头
遇到一个简单的需求: 客户有一个表格可能有很多内容,当内容很多的时候,表格就会出现滚动条 客户希望当表格内容很多时,只滚动表格而不滚动浏览器窗口 在网上找到很多相关的插件,要不就是太复杂,要不就是满足 ...
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻 ...
- html5 table的表头固定的HTML代码
table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- 固定Table的头部和左边的列-在Knockout Js使用场景下
要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...
随机推荐
- 客户端相关知识学习（八）之Android“.9.png”
参考 Android中.9图片的含义及制作教程 .9.png Android .9.png 的介绍
- TensorFlow良心入门教程
All the matrials come from Machine Learning class in Polyu,HK and I reorganize them and add referenc ...
- 前端配置jenkins
tar命令详解:https://www.cnblogs.com/luck123/p/11401007.html
- 关于SQL查询某年数据 和DATEPART 函数的使用
数据库查询某年数据(sql server)select *from 表名 where YEAR(存时间的字段名) =某年select *from News where YEAR(addDate) =2 ...
- 函数缓存 (Function caching)
函数返回值缓存是优化一个函数的常用手段.我们可以将函数.输入参数.返回值全部保存起来,当下次以同样的参数调用这个函数时,直接使用存储的结果作为返回(不需要重新计算). 函数缓存允许我们将一个函数对于给 ...
- MySQL数据库笔记二：数据类型及数据库操作
三.MySQL数据库数据类型 MySQL数据库中支持多种数据类型:数值型.字符型.日期型 常用的数据类型: 1.整型 int:整形,存储整数 int(M):M表示预期值.与存储大小和数值的范围无关. ...
- 解决Chrome无法安装CRX离线插件
解释说明: 谷歌浏览器Chrome,版本号67.0.3396.99,自这个版本后的Chrome,手动拖放插件文件crx到谷歌浏览器,这种安装插件的方式,一定会失败,它会提示“无法从该网站添加应用,扩展 ...
- 搜索框+ 定时器+Bug解决
定时器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- Linux 安装 wxPython4.0.4
Ubuntu 18.04 安装 wxPython4.0.4 因为 wxPython4.x 不提供 Linux 下的 bin 文件安装,以下记录 Ubuntu 18.04 的安装过程 (Ubuntu 1 ...
- Summer training #8
A: B:按题意直接暴力找符合题意的数的个数 #include <bits/stdc++.h> #include <cstring> #include <iostream ...