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. jQuery layer[页面弹出框]

    常见接口如下: 方法名 描述 $.layer({}) 核心接口,参数是一个对象,对象属性参见上述列表.诸如layer.alert()之类的为$.layer()的包装方法. layer.v 获取版本号. ...

  2. Android adb not responsing

    netstat -aon | findstr "5037" and you will find the process "kadb.exe" that used ...

  3. centos下卸载rpm包

    rpm -qa|grep sphinx rpm -e sphinx..... 安全地卸载 RPM卸载软件包,并不是简单地将原来安装的文件逐个删除,那样做的话,可能会出现这样或那样的问题.如,A软件包依 ...

  4. VS2013 支持python和nodejs

    一.在VS2013中,安装python的支持 1. http://pytools.codeplex.com/下载插件 2. https://www.python.org/download/下载Pyth ...

  5. linux yum install resource - epel

    首先现在如下rpm包,然后安装对应的rpm包centos5 32位epel源下载地址: www.lishiming.net/data/attachment/forum/epel-release-5-4 ...

  6. css奇特用法之 IMG添加背景图片配合显示--效果惊艳

    IMG标签本身是显示图片的,但通过CSS可以再为其设置背景图片,让其和自身的图片配合来显示,最终的效果会让你惊叹.当然,这个发现来自于老外,所以代码马上与大家分享.再此之前,我也从来没有想到过这个思路 ...

  7. VMware Workstation CentOS-6.4-x86_64-minimal 配置网络以及安装JDK和tomcat

    1.配置网络(能够联网)转自:http://blog.sina.com.cn/s/blog_75ad10100101ma4c.html 1)vmware的网卡连接方式选择为桥接(bridged)不要用 ...

  8. JQuery处理json与ajax返回JSON实例

    一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内 ...

  9. asp.net 客户邮件群发功能 SendMail 发送静态化html

    背景:现在几乎每个企业都要用到邮箱,而在大客户量情况下,为我们的不同等级的客户送上节日关怀,以及把我们的喜讯.新品通知到他们是我们急需解决的问题.效果如图 思路: 1.静态化网页模版,首先考虑需要发送 ...

  10. 20150311—html中iframe(转发)

    JS实现iframe框架页面跳转和刷新 一.js方式的页面跳转 1.window.location.href方式 <script language="javascript" ...