快捷導(dǎo)航

Table凍結(jié)表頭示例代碼

更新時(shí)間：2013年08月20日 19:06:34 作者：

Table凍結(jié)表頭，大家對(duì)此應(yīng)該不會(huì)很陌生，實(shí)現(xiàn)很簡(jiǎn)單，下面為大家詳細(xì)介紹下具體的實(shí)現(xiàn)，感興趣的朋友可以參考下

Table凍結(jié)表頭：

 
<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源碼：

復(fù)制代碼代碼如下:

 
<%@ 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%">序號(hào)</th> 
<th width="25%">內(nèi)容</th> 
<th width="25%">序號(hào)</th> 
<th width="25%">內(nèi)容</th> 
</tr> 
<tr> 
<td>1</td> 
<td>內(nèi)容</td> 
<td>11</td> 
<td>內(nèi)容</td> 
</tr> 
<tr> 
<td>2</td> 
<td>內(nèi)容</td> 
<td>22</td> 
<td>內(nèi)容</td> 
</tr> 
<tr> 
<td>3</td> 
<td>內(nèi)容</td> 
<td>33</td> 
<td>內(nèi)容</td> 
</tr> 
<tr> 
<td>4</td> 
<td>內(nèi)容</td> 
<td>44</td> 
<td>內(nèi)容</td> 
</tr> 
<tr> 
<td>5</td> 
<td>內(nèi)容</td> 
<td>55</td> 
<td>內(nèi)容</td> 
</tr> 
<tr> 
<td>6</td> 
<td>內(nèi)容</td> 
<td>66</td> 
<td>內(nèi)容</td> 
</tr> 
<tr> 
<td>7</td> 
<td>內(nèi)容</td> 
<td>77</td> 
<td>內(nèi)容</td> 
</tr> 
<tr> 
<td>8</td> 
<td>內(nèi)容</td> 
<td>88</td> 
<td>內(nèi)容</td> 
</tr> 
<tr> 
<td>9</td> 
<td>內(nèi)容</td> 
<td>99</td> 
<td>內(nèi)容</td> 
</tr> 
<tr> 
<td>10</td> 
<td>內(nèi)容</td> 
<td>1010</td> 
<td>內(nèi)容</td> 
</tr> 
</table> 
</div> 
</body> 
</html> 

相關(guān)文章

基于javascript處理二進(jìn)制圖片流過程詳解
這篇文章主要介紹了基于javascript處理二進(jìn)制圖片流過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06
基于JavaScript實(shí)現(xiàn)簡(jiǎn)單的音頻播放功能
本文給大家?guī)?lái)了基于js實(shí)現(xiàn)簡(jiǎn)單的音頻播放功能，數(shù)據(jù)是由后臺(tái)提供的，具體實(shí)例代碼大家參考下本文
2018-01-01
JavaScript中的內(nèi)存泄漏的原因
本文主要介紹了聊一聊JavaScript中的內(nèi)存泄漏，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
jsp網(wǎng)頁(yè)搜索結(jié)果中實(shí)現(xiàn)選中一行使其高亮
在做搜索結(jié)果時(shí)為了好看需要將選中的行變的高亮些，下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下
2014-02-02
javascript轉(zhuǎn)換字符串為dom對(duì)象（字符串動(dòng)態(tài)創(chuàng)建dom）
那么今天的目的就是教大家怎么去實(shí)現(xiàn)一個(gè)這樣的方法用來(lái)把字符串直接轉(zhuǎn)換為標(biāo)準(zhǔn)的dom對(duì)象
2010-05-05
Asp.Net之JS生成分頁(yè)條的方法
下面小編就為大家?guī)?lái)一篇Asp.Net之JS生成分頁(yè)條的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-11-11
七種JS實(shí)現(xiàn)數(shù)組去重的方式
這篇文章主要介紹了七種JS實(shí)現(xiàn)數(shù)組去重的方式，下面文章以JS數(shù)組去重的相關(guān)資料展開全文內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2021-12-12
JS上傳圖片前的限制包括(jpg jpg gif及大小高寬)等
文件上傳之前的檢測(cè)，通常是通過文件名來(lái)判斷文件類型是否合法，但是要想檢測(cè)文件的大小很難辦到，除非在本地或者使用控件。使用JS可以輕松解決詞問題，js在上傳圖片前判斷大小這個(gè)可以用javascript實(shí)現(xiàn),效果
2012-12-12
使用TypeScript接口優(yōu)化數(shù)據(jù)結(jié)構(gòu)的示例詳解
在現(xiàn)代軟件開發(fā)中,數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)至關(guān)重要,它直接影響到程序的性能和可維護(hù)性,TypeScript 作為一種靜態(tài)類型的超集,為 JavaScript 帶來(lái)了類型系統(tǒng),本文將探討如何利用 TypeScript 的接口（Interfaces）來(lái)優(yōu)化數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下
2024-09-09
JS 將偽數(shù)組轉(zhuǎn)換成數(shù)組的實(shí)現(xiàn)示例
這篇文章主要介紹了JS 將偽數(shù)組轉(zhuǎn)換成數(shù)組，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07