Table冻结表头示例代码


Posted in Javascript onAugust 20, 2013

Table冻结表头:

<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>

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>
Javascript 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 #Javascript
jQuery回车实现登录简单实现
Aug 20 #Javascript
jquery 延迟执行实例介绍
Aug 20 #Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 #Javascript
js获取指定日期前后的日期代码
Aug 20 #Javascript
js 自定义个性下拉选择框示例
Aug 20 #Javascript
JavaScript打印iframe内容示例代码
Aug 20 #Javascript
You might like
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python实现一组典型数据格式转换
2018/12/15 Python
Django框架自定义session处理操作示例
2019/05/27 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python多维数组分位数的求取方式
2020/03/03 Python
python logging.info在终端没输出的解决
2020/05/12 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
九年级科学教学反思
2014/01/29 职场文书
手机被没收检讨书
2014/02/22 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
向领导表决心的话
2014/03/11 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
2014年班组长工作总结
2014/11/20 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Python中的xlrd模块使用整理
2021/06/15 Python