Table冻结表头

最新推荐文章于 2021-12-27 17:09:00 发布

qinglang1987

最新推荐文章于 2021-12-27 17:09:00 发布

阅读量3k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wangxw8746/article/details/10117077

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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 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%">内容</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>