Table冻结表头示例代码
Table冻结表头示例代码
发布时间:2016-12-30 来源:查字典编辑
摘要:Table冻结表头:复制代码代码如下:functionfixupFirstRow(tab){vardiv=tab.parentNode;if...

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>

<table id="freezedivTable" 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教程学习
编程开发子分类