快捷導(dǎo)航

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

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

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