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源碼:
<%@ 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>
復(fù)制代碼 代碼如下:
<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)文章
js實(shí)現(xiàn)驗(yàn)證碼干擾(靜態(tài))
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)驗(yàn)證碼干擾,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02js實(shí)現(xiàn)復(fù)制功能(多種方法集合)
這篇文章主要介紹了js實(shí)現(xiàn)復(fù)制功能(多種方法集合),需要的朋友可以參考下2018-01-01javascript 動(dòng)態(tài)修改css樣式方法匯總(四種方法)
為了達(dá)到某種特殊的效果我們需要用Javascript動(dòng)態(tài)的去更改某一個(gè)標(biāo)簽的Css屬性,如何動(dòng)態(tài)修改css樣式呢?面對(duì)這個(gè)問題,小編帶領(lǐng)大家來解決javascript動(dòng)態(tài)修改css樣式,小伙伴們都快來學(xué)習(xí)吧2015-08-08javascript使用isNaN()函數(shù)判斷變量是否為數(shù)字
javascript中判斷變量是否為數(shù)字的方法,這里主要介紹javascript里的 isNaN() 函數(shù),具體使用如下,感興趣的朋友可以參考下2013-09-09js getBoundingClientRect() 來獲取頁面元素的位置
該方法已經(jīng)不再是IE Only了,F(xiàn)F3.0+和Opera9.5+已經(jīng)支持了該方法,可以說在獲得頁面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必須通過循環(huán)來獲得元素在頁面中的絕對(duì)位置。2010-11-11javascript自適應(yīng)寬度的瀑布流實(shí)現(xiàn)思路
這里主要介紹瀑布流的一種實(shí)現(xiàn)方法:絕對(duì)定位(css)+javascript+ajax+json。簡(jiǎn)單一點(diǎn)如果不做滾動(dòng)加載的話就是絕對(duì)定位(css)+javascript了,ajax和json是滾動(dòng)加載更多內(nèi)容的時(shí)候用到的,感興趣的你可以參考下哦2013-02-02