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. 使用Calendar 将当月日历打印出来

    package com.date; import java.text.DateFormatSymbols; import java.util.Calendar; import org.junit.Te ...

  2. [Java] Eclipse+Spring学习（一）环境搭建

    转自:http://blog.sina.com.cn/s/blog_7c3736810100qhia.html 最近由于投了一家公司实习,他要java工程师,而我大学3年的精力都花到了ASP.NET和 ...

  3. TCP/IP协议原理与应用笔记26：网际协议（IP）之 分片（Fragmentation）

    1. 分片(Fragmentation) 适应在不同的MTU的物理网上传输. 备注: MTU:最大传输单元,Maximum Transmission Unit,它是指一种通信协议的某一层上面所能通过的 ...

  4. Android SQLite 的简单实例

    1.前言: 今天再一次去蹭了一下某老师的android课,这一次讲的是Android的SQLite的使用,老师当场讲解了他自己做的例子. 回来之后,我春心萌动,不得不拿着参考资料再做了一个类似的例子, ...

  5. Java学习笔记——显示当前日期的三种方式

    一.Date类:这是一种过时的表达方式 import java.util.Date; Date date = new Date(); System.out.println((1900+date.get ...

  6. Linux_netstat 详解

    简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Member ...

  7. uva 12587 二分枚举

    思路:维护一个森林,二分枚举最小的最大值. #include<set> #include<map> #include<cmath> #include<queu ...

  8. hdu 1243 反恐训练营 最长公共字序列

    此题的题意很明确,就是求最长公共子序列: #include<iostream> #include<algorithm> #include<cstdio> #incl ...

  9. Mac 在命令行快速切换目录 mark

    转自: http://www.ccvita.com/520.html ,略修改. 每天在命令行下,一大部分的工作都是一遍又一遍的输入 cd ~/some/very/deep/often-used/di ...

  10. PHP与MySQL中编码的设置

    php代码 header("Content-type:text/html;Charset=utf8"); myql_query("set names utf8" ...