Table冻结多行表头

Table冻结多行表头

		<script type="text/javascript">
			function fixupFirstRow(tab,num) {   
	          	var div=tab.parentNode;   
	    		if(div.className.toLowerCase()=="freezediv"){  
	    		 	for(var i=0;i<num;i++){
	    		 		tab.rows[i].style.zIndex="1";
	    		 		tab.rows[i].style.position="relative"; 
	    		 	}
	    		 	var tr;
		          	div.onscroll = function(){ 
		          		for(var j=0;j<num;j++){
		          			tr = tab.rows[j];
		              		tr.style.top = this.scrollTop-(this.scrollTop==0?1:2);   
		              		tr.style.left=-1; 
		          		}  
		          	} 
	   			}    
		  	} 
  	
		  	window.onload = function(){   
		        var tab=document.getElementById("freezedivTable"); 
		        if(tab){
		           //4 -- 表示冻结四行
		           fixupFirstRow(tab,4);
		        }   
		    }   
		</script>


html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<script type="text/javascript">
			function fixupFirstRow(tab,num) {   
	          	var div=tab.parentNode;   
	    		if(div.className.toLowerCase()=="freezediv"){  
	    		 	for(var i=0;i<num;i++){
	    		 		tab.rows[i].style.zIndex="1";
	    		 		tab.rows[i].style.position="relative"; 
	    		 	}
	    		 	var tr;
		          	div.onscroll = function(){ 
		          		for(var j=0;j<num;j++){
		          			tr = tab.rows[j];
		              		tr.style.top = this.scrollTop-(this.scrollTop==0?1:2);   
		              		tr.style.left=-1; 
		          		}  
		          	} 
	   			}    
		  	} 
  	
		  	window.onload = function(){   
		        var tab=document.getElementById("freezedivTable"); 
		        if(tab){
		           //4 -- 表示冻结四行
		           fixupFirstRow(tab,4);
		        }   
		    }   
		</script>
	</head>
	<body>
		<div class="freezediv" style="width:100%;height:150px;overflow:auto;">
			<table id="freezedivTable" style="width:100%;" border="1">
				<tr bgcolor="white">
					<th width="50%" colspan="2">序号</th>
					<th width="50%" colspan="2">内容</th>
				</tr>
				<tr bgcolor="white">
					<th width="25%">序号</th>
					<th width="25%">内容</th>
					<th width="25%">序号</th>
					<th width="25%">内容</th>
				</tr>
				<tr bgcolor="white">
					<td>1</td>
					<td>内容</td>
					<td>11</td>
					<td>内容</td>
				</tr>
				<tr bgcolor="white">
					<td>2</td>
					<td>内容</td>
					<td>22</td>
					<td>内容</td>
				</tr>
				<tr bgcolor="white">
					<td>3</td>
					<td>内容</td>
					<td>33</td>
					<td>内容</td>
				</tr>
				<tr bgcolor="white">
					<td>4</td>
					<td>内容</td>
					<td>44</td>
					<td>内容</td>
				</tr>
				<tr bgcolor="white">
					<td>5</td>
					<td>内容</td>
					<td>55</td>
					<td>内容</td>
				</tr>
				<tr bgcolor="white">
					<td>6</td>
					<td>内容</td>
					<td>66</td>
					<td>内容</td>
				</tr>
				<tr bgcolor="white">
					<td>7</td>
					<td>内容</td>
					<td>77</td>
					<td>内容</td>
				</tr>
				<tr bgcolor="white">
					<td>8</td>
					<td>内容</td>
					<td>88</td>
					<td>内容</td>
				</tr>
				<tr bgcolor="white">
					<td>9</td>
					<td>内容</td>
					<td>99</td>
					<td>内容</td>
				</tr>
				<tr bgcolor="white">
					<td>10</td>
					<td>内容</td>
					<td>1010</td>
					<td>内容</td>
				</tr>
			</table>
		</div>
	</body>
</html>


 

你可能感兴趣的:(Table冻结多行表头)