脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Table冻结表头

Table冻结表头示例代码

 更新时间：2013年08月20日 19:06:34   作者：  
Table冻结表头，大家对此应该不会很陌生，实现很简单，下面为大家详细介绍下具体的实现，感兴趣的朋友可以参考下
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处理二进制图片流过程详解

    基于javascript处理二进制图片流过程详解

    这篇文章主要介绍了基于javascript处理二进制图片流过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • 基于JavaScript实现简单的音频播放功能

    基于JavaScript实现简单的音频播放功能

    本文给大家带来了基于js实现简单的音频播放功能，数据是由后台提供的，具体实例代码大家参考下本文
    2018-01-01
  • JavaScript中的内存泄漏的原因

    JavaScript中的内存泄漏的原因

    本文主要介绍了聊一聊JavaScript中的内存泄漏，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • jsp网页搜索结果中实现选中一行使其高亮

    jsp网页搜索结果中实现选中一行使其高亮

    在做搜索结果时为了好看需要将选中的行变的高亮些，下面有个不错的示例,需要的朋友可以参考下
    2014-02-02
  • javascript转换字符串为dom对象（字符串动态创建dom）

    javascript转换字符串为dom对象（字符串动态创建dom）

    那么今天的目的就是教大家怎么去实现一个这样的方法用来把字符串直接转换为标准的dom对象
    2010-05-05
  • Asp.Net之JS生成分页条的方法

    Asp.Net之JS生成分页条的方法

    下面小编就为大家带来一篇Asp.Net之JS生成分页条的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 七种JS实现数组去重的方式

    七种JS实现数组去重的方式

    这篇文章主要介绍了七种JS实现数组去重的方式，下面文章以JS数组去重的相关资料展开全文内容，具有一定的参考价值，需要的小伙伴可以参考一下
    2021-12-12
  • JS上传图片前的限制包括(jpg jpg gif及大小高宽)等

    JS上传图片前的限制包括(jpg jpg gif及大小高宽)等

    文件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。使用JS可以轻松解决词问题，js在上传图片前判断大小 这个可以用javascript实现,效果
    2012-12-12
  • 使用TypeScript接口优化数据结构的示例详解

    使用TypeScript接口优化数据结构的示例详解

    在现代软件开发中,数据结构的设计至关重要,它直接影响到程序的性能和可维护性,TypeScript 作为一种静态类型的超集,为 JavaScript 带来了类型系统,本文将探讨如何利用 TypeScript 的接口（Interfaces）来优化数据结构,需要的朋友可以参考下
    2024-09-09
  • JS 将伪数组转换成数组的实现示例

    JS 将伪数组转换成数组的实现示例

    这篇文章主要介绍了JS 将伪数组转换成数组，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07

最新评论