Table凍結(jié)表頭示例代碼
更新時間:2013年08月20日 19:06:34 作者:
Table凍結(jié)表頭,大家對此應該不會很陌生,實現(xiàn)很簡單,下面為大家詳細介紹下具體的實現(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%">序號</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>
復制代碼 代碼如下:
<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%">內(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>
相關文章
javascript 動態(tài)修改css樣式方法匯總(四種方法)
為了達到某種特殊的效果我們需要用Javascript動態(tài)的去更改某一個標簽的Css屬性,如何動態(tài)修改css樣式呢?面對這個問題,小編帶領大家來解決javascript動態(tài)修改css樣式,小伙伴們都快來學習吧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)來獲得元素在頁面中的絕對位置。2010-11-11