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. encodeURIComponent() 和 encodeURI()

    encodeURI(URIstring): 该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) . 该方法的目的是对 URI ...

  2. 【Android 界面效果34】Android里Service的bindService()和startService()混合使用深入分析

    .先讲讲怎么使用bindService()绑定服务 应用组件(客户端)可以调用bindService()绑定到一个service．Android系统之后调用service的onBind()方法,它返回 ...

  3. Centos7.5 java环境的安装配置

    1.查看系统中的java环境 [root@localhost ~]# java -version openjdk version "1.8.0_101" OpenJDK Runti ...

  4. MySQL5.0版本的安装图解教程

    MySQL5.0版本的安装图解教程是给新手学习的,当前mysql5.0.96是最新的稳定版本. mysql 下载地址 http://www.jb51.net/softs/2193.html 下面的是M ...

  5. Smart法则

    设立目标不是一个很简单的事情.人们经常会犯一些基本的错误,即过于理想化.不符合客观情况.不容易执行落实,因此计划容易变成一种“美好的愿望”而已.在20世纪70年代,一位美国人为设立目标做出了一个简单而 ...

  6. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  7. 理解js中的闭包

    闭包 我的理解是 能够有权访问另一个函数作用域中变量的函数 通常我们知道 普通的函数在调用完成之后,活动对象不会从内存中销毁,其执行环境的作用域链会被销毁,造成资源的浪费 而闭包的好处就在于执行完就会 ...

  8. Ajax异步操作集合啦（阿贾克斯）

    /* * Ajax的核心操作对象是xmlHttpRequest * 简化操作步骤:实例化一个xmlHttpRequest对象 ==> 发送请求 ==> 接受响应 ==> 执行回调 * ...

  9. 转：实体ToolTip显示XData

    首先要说明,实现方式不是我的原创,其中ToolTip的实现转自这里,然后XData的设置和获取来自Kean的博客,当然我自己也做了点研究,在这里,然后把这两个技术结合起来就是你将要看到的东西. 先上效 ...

  10. Asp.Net复习篇之Asp.Net生命周期与Asp.Net页的生命周期

    Asp.Net生命周期与Asp.Net页的生命周期是一个比较重要的话题,有时可能似乎知道一些,但又说不出个所以然,而且时常把这两个概念混淆.现在也是该好好理清思路,把这两个概念搞懂. Asp.Net生 ...