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. 在Archlinux ARM - Raspberry Pi上安装Google coder

    升级软件包 一个 pacman 命令就可以升级整个系统.花费的时间取决于系统有多老.这个命令会同步非本地(local)软件仓库并升级系统的软件包: # pacman -Syu 提示:确保make以及g ...

  2. 【阿里云产品公测】弹性伸缩服务ESS之试用初体验

    弹性伸缩服务ESS之试用初体验 作者:云郎 2014/10/15 阿里云弹性伸缩服务(Elastic Scaling Service)是根据用户的业务需求和策略,自动调整其弹性计算服务器(ECS)的管 ...

  3. leetcode题解:Binary Tree Postorder Traversal (二叉树的后序遍历)

    题目: Given a binary tree, return the postorder traversal of its nodes' values. For example:Given bina ...

  4. django 用imagefiled访问图片

    使用FileField和ImageField时,我们有几个步骤: 在settings.py中设置MEDIA_ROOT和MEDIA_URL MEDIA_ROOT:一个绝对路径,Django根据它知道文件 ...

  5. hdu 1228 A+B 字符串处理 超级大水题

    中文意思不解释. 很水,我本来想用switch处理字符串,然后编译不通过...原来switch只能处理整数型的啊,我都忘了. 然后就有了很挫的一大串if代码了... 代码: #include < ...

  6. c#几个小例子引发的思考

    楚广明老师的c#教程每一节都会给出几个小例子让大家联系,对于初学者来说这确实是一件很纠结的事情,下面我把这几个小例子简单的写一下.同时看一下我们学到了什么 1.面向过程版的圆周长面积计算 using ...

  7. JVM 运行时内存结构

      1.JVM内存模型       JVM运行时内存=共享内存区+线程内存区 1).共享内存区       共享内存区=持久带+堆       持久带=方法区+其他       堆=Old Space ...

  8. Composer 中国镜像

    1.修改Composer的全局配置文件 config.json 使用sudo composer config -l -g 查看composer全局配置信息,在这些信息中查找 [home] 配置项就是 ...

  9. poj 3378 二维树状数组

    思路:直接用long long 保存会WA.用下高精度加法就行了. #include<map> #include<set> #include<cmath> #inc ...

  10. R语言快速入门

    R语言是针对统计分析和数据科学的功能全面的开源语言,R的官方网址:http://www.r-project.org/  在Windows环境下安装R是很方便的 R语言的两种运行模式:交互模式和批处理模 ...