Table冻结表头的js实现代码。
Table冻结表头：
<script type="text/javascript">

//冻结table的表头 

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; 

} 

} 

} 

//加载//by www.jbxue.com

window.onload = function(){ 

var tab=document.getElementById("freezedivTable"); 

if(tab){ 

fixupFirstRow(tab); 

} 

} 

</script> 
html源码： 
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

<head> 

<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:100px;overflow:auto;"> 

<table id="freezedivTable" style="width:100%;" border="1"> 

<tr bgcolor="white"> 

<th width="25%">序号</th> 

<th width="25%">内容</th> 

<th width="25%">序号</th> 

<th width="25%">内容</th> 

</tr> 

<tr> 

<td>1</td> 

<td>内容</td> 

<td>11</td> 

<td>内容</td> 

</tr> 

<tr> 

<td>2</td> 

<td>内容</td> 

<td>22</td> 

<td>内容</td> 

</tr> 

<tr> 

<td>3</td> 

<td>内容</td> 

<td>33</td> 

<td>内容</td> 

</tr> 

<tr> 

<td>4</td> 

<td>内容</td> 

<td>44</td> 

<td>内容</td> 

</tr> 

<tr> 

<td>5</td> 

<td>内容</td> 

<td>55</td> 

<td>内容</td> 

</tr> 

<tr> 

<td>6</td> 

<td>内容</td> 

<td>66</td> 

<td>内容</td> 

</tr> 

<tr> 

<td>7</td> 

<td>内容</td> 

<td>77</td> 

<td>内容</td> 

</tr> 

<tr> 

<td>8</td> 

<td>内容</td> 

<td>88</td> 

<td>内容</td> 

</tr> 

<tr> 

<td>9</td> 

<td>内容</td> 

<td>99</td> 

<td>内容</td> 

</tr> 

<tr> 

<td>10</td> 

<td>内容</td> 

<td>1010</td> 

<td>内容</td> 

</tr> 

</table> 

</div> 

</body> 

</html> 

js Table冻结表头示例代码的更多相关文章

  1. IE下JS读取xml文件示例代码

    JS读取xml文件具体步骤为:创建DOM对象.加载xml文件(仅适用于IE)附示例代码,感兴趣的朋友可以参考下,希望对大家有所帮助使用javascript脚本读取xml文件,这里暂只考虑IE浏览器st ...

  2. JS实现随机数生成算法示例代码

    JS实现随机数生成算法的方法有很多,本文为大家介绍一个比较不错的方法. 1, var MT = []; var index = 0; function initialize_generator(see ...

  3. JS和Jquery获取和修改label的值的示例代码

    abel标签在JS和Jquery中使用不能像其他标签一样用value获取它的值,下面有个不错的示例,希望大家可以学习下 来源:  <  JS和Jquery获取和修改label的值的示例代码  & ...

  4. pyspider示例代码一：利用phantomjs解决js问题

    本系列文章主要记录和讲解pyspider的示例代码,希望能抛砖引玉.pyspider示例代码官方网站是http://demo.pyspider.org/.上面的示例代码太多,无从下手.因此本人找出一下 ...

  5. SQL Server中Table字典数据的查询SQL示例代码

    SQL Server中Table字典数据的查询SQL示例代码 前言 在数据库系统原理与设计(第3版)教科书中这样写道: 数据库包含4类数据: 1.用户数据 2.元数据 3.索引 4.应用元数据 其中, ...

  6. html5 table的表头固定的HTML代码

    table的表头固定的HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  7. Django与JS交互的示例代码-django js 获取 python 字典-Django 前后台的数据传递

    Django与JS交互的示例代码 Django 前后台的数据传递 https://www.cnblogs.com/xibuhaohao/p/10192052.html 应用一:有时候我们想把一个 li ...

  8. 非常强大的table根据表头排序,点击表头名称,对其内容排序

    js代码: /** * 通过表头对表列进行排序 * * @param sTableID * 要处理的表ID<table id=''> * @param iCol * 字段列id eg: 0 ...

  9. python开源项目及示例代码

    本页面是俺收集的各种 Python 资源,不定期更新. 下面列出的各种 Python 库/模块/工具,如果名称带超链接,说明是第三方的:否则是 Python 语言内置的. 1 算法 1.1 字符串处理 ...

随机推荐

  1. Data Struture 之 指针

    指针是C语言中广泛使用的一种数据类型. 运用指针编程是C语言最主要的风格之一.利用指针变量可以表示各种数据结构: 能很方便地使用数组和字符串:  并能象汇编语言一样处理内存地址,从而编出精练而高效的程 ...

  2. 从零开始学JAVA(04)－连接数据库MSSQL(JDBC准备篇)

    在JAVA中可以使用JDBC连接数据库,不管是哪种数据库,首先必须下载驱动,包括Windows的MSSQL. 1.下载MSSQL的JDBC驱动,可以通过百度“Microsoft JDBC Driver ...

  3. Burn the Linked Camp(bellman 差分约束系统)

    Burn the Linked Camp Time Limit: 2 Seconds      Memory Limit: 65536 KB It is well known that, in the ...

  4. 【阿里云产品公测】简单日志服务SLS使用评测 + 教程

    [阿里云产品公测]简单日志服务SLS使用评测 + 教程 评测介绍 被测产品: 简单日志服务SLS 评测环境: 阿里云基础ECS x2(1核, 512M, 1M) 操作系统: CentOS 6.5 x6 ...

  5. TFS 2010 使用手册（二）项目集合与项目

    1．项目集合 1.1 项目集合创建 打开TFS管理控制台,点击“团队项目集合”. 图1点击“团队项目集合” 图2 点击“创建集合” 然后按照向导一步步完成项目集合的创建. 1.2 项目集合的删除 选中 ...

  6. UVa Problem 10132 File Fragmentation （文件还原） 排列组合+暴力

    题目说每个相同文件(01串)都被撕裂成两部分,要求拼凑成原来的样子,如果有多种可能输出一种. 我标题写着排列组合,其实不是什么高深的数学题,只要把最长的那几个和最短的那几个凑一起,然后去用其他几个验证 ...

  7. Ubuntu/Debian 安装lxml的正确方式

    lxml是Python的一个库,主要用于处理XML和HTML. 最近需要用lxml,但是在Ubuntu上直接pip安装失败,研究了半天终于找到了正确安装方法,记录在此. 由于Ubuntu和Debian ...

  8. 用Chrome浏览器模拟手机,android,iphone,ipad访问网站

    很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容.谷歌Chrome浏览 器,可以很方便地用来当3G手机模拟器.在Windows的 ...

  9. zend studio常见问题解答

    1.如何实现zend studio成为注册版请点击查看此链接http://www.geekso.com/ZendStudio100/ 2.如何将zend studio的默认GBK编码设置为其它编码,例 ...

  10. 51nod-1686 第K大区间(二分+尺取法)

    题目链接: 第K大区间 基准时间限制:1 秒 空间限制:131072 KB    定义一个区间的值为其众数出现的次数.现给出n个数,求将所有区间的值排序后,第K大的值为多少. Input 第一行两个数 ...