js方式锁定表头

最新推荐文章于 2022-04-29 21:52:57 发布
最新推荐文章于 2022-04-29 21:52:57 发布
阅读量660 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruanhao1203/article/details/37830955
版权

js方式锁定表头


js代码修改版：

function FixTable(TableID, FixColumnNumber, width, height) {
    /// <summary>
    ///     锁定表头和列
    ///     <para> sorex.cnblogs.com </para>
    /// </summary>
    /// <param name="TableID" type="String">
    ///     要锁定的Table的ID
    /// </param>
    /// <param name="FixColumnNumber" type="Number">
    ///     要锁定列的个数
    /// </param>
    /// <param name="width" type="Number">
    ///     显示的宽度
    /// </param>
    /// <param name="height" type="Number">
    ///     显示的高度
    /// </param>

    if ($("#" + TableID + "_tableLayout").length != 0) {
        $("#" + TableID + "_tableLayout").before($("#" + TableID));
        $("#" + TableID + "_tableLayout").empty();
    }
    else {
        $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
    }
    $('<div id="' + TableID + '_tableFix"></div>'
    + '<div id="' + TableID + '_tableHead"></div>'
    + '<div id="' + TableID + '_tableColumn"></div>'
    + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
    var oldtable = $("#" + TableID);
	
    var tableFixClone = oldtable.clone(true);
    tableFixClone.attr("id", TableID + "_tableFixClone");
    $("#" + TableID + "_tableFix").append(tableFixClone);
    var tableHeadClone = oldtable.clone(true);
    tableHeadClone.attr("id", TableID + "_tableHeadClone");
    $("#" + TableID + "_tableHead").append(tableHeadClone);
    var tableColumnClone = oldtable.clone(true);
    tableColumnClone.attr("id", TableID + "_tableColumnClone");
    $("#" + TableID + "_tableColumn").append(tableColumnClone);
    $("#" + TableID + "_tableData").append(oldtable);
    $("#" + TableID + "_tableLayout table").each(function () {
        $(this).css("margin", "0");
    });
    var HeadHeight = $("#" + TableID + "_tableHead thead").height();
    
    $("#" + TableID + "_tableHead").css("height", HeadHeight);
    $("#" + TableID + "_tableFix").css("height", HeadHeight);
    var ColumnsWidth = 0;
    var ColumnsNumber = 0;
    $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
        ColumnsWidth += $(this).outerWidth(true);
        ColumnsNumber++;
    });
    ColumnsWidth+=1;//左边栏最右侧边框1像素，不加则没有边框
    $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
    $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
    $("#" + TableID + "_tableData").scroll(function () {
        $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
        $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
    });
    $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "#00765c" });
    $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "#00765c" });
    $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "#00765c" });
    $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
    if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
        $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
        $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
    }
    if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
        $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
        $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
    }
    $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
    $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
}
$(document).ready(function () {
			
			//固定表头
            FixTable("MyTable", 3, $(window).width()-40, 315);
            
            
			
        });

css代码：


<style type="text/css">
		
		* {	padding: 0;	margin: 0} 
		
	
		
		tr th{
			text-align: center;
			font:bold 12px '宋体';
			border: 0px;
			
			color: #ffffff;
			border-bottom: 0px;
			border-right:1px solid #000000;
			border-top:1px solid #000000;
			
		}
		
		.left{
			font:bold 12px '宋体';
			
			text-align:center;
			border-right: 1px solid #000;
			border-bottom:1px solid #000;
		}
		.data{
			font:12px '宋体';
			text-align:right;
			border-right: 1px solid #000;
			border-bottom:1px solid #000;
		}
		
	</style>


table代码：


<pre name="code" class="html"><table

    style=" width:  ${fn:length(rs[1])*50+300 };height: ${fn:length(rs[2])*25+60 }; color: #000000;  font-size: medium; "
    id="MyTable"
    cellspacing="0"
    cellpadding="0"
>
<thead>
    <tr style="height:30px;">
	
        <th style="text-align: center; width: 100px;border-bottom:1px solid #000;border-left:1px solid #000000;" rowspan="2">
            地区
        </th>
        <th style="text-align: center; width: 40px;border-bottom:1px solid #000;" rowspan="2">
            序号
        </th>
        <th style="text-align: center; width: 160px;border-bottom:1px solid #000;" rowspan="2">
            零售点
        </th>
	//这里可以写模拟数据，生成表头
        <c:forEach items="${rs[0]}" var="r" varStatus="sta">
        	<c:if test="${sta.index==0}">
			        <th style="text-align: center;" colspan="${r['SUM'] }">
			            ${r['PPMC'] }
			        </th>
    			</c:if>
    			<c:if test="${sta.index!=0}">
			        <th style="text-align: center;" colspan="${r['SUM'] }">
			            ${r['PPMC'] }
			        </th>
    			</c:if>
	        
        </c:forEach>
        
        
    </tr>
  
    <tr style="height:30px;">
	// 这里可以写模拟数据，生成表头
    	<c:forEach items="${rs[1]}" var="r" varStatus="sta">
    		
    			<c:if test="${sta.index==0}">
			        <th style="text-align: center; width: 50px;border-bottom:1px solid #000;">
			           ${r['GGJC'] }
			        </th>
    			</c:if>
    			<c:if test="${sta.index!=0}">
			        <th style="text-align: center; width: 50px;border-bottom:1px solid #000;">
			           ${r['GGJC'] }
			        </th>
    			</c:if>
		   
    	</c:forEach>
        
    </tr>
    
</thead>
    <tbody>
<!--
		这里包括了左边栏和右边数据部分，其实就是一个的tr，模拟数据解决就可以了
-->
    <!-- 数据行 -->
    	<!-- 合并城市单元格 -->
    	<c:set value="${rs[3]}" var="csCnt"></c:set>
    	<c:set value="0" var="csbs"></c:set>
    	<c:set value="1" var="i"></c:set>
        <c:forEach items="${rs[2]}" var="r" varStatus="s">
        
        <tr style="height:25px;">
        	<c:if test="${csbs==0 || csbs!=r['CSBS']}">
            <td class="left" style="border-left:1px solid #000;background-color:white;" rowspan="${csCnt[r['CSBS']] }">
                ${r['CSMC'] }
            </td>
            </c:if>
        	
	       <c:if test="${csbs==0 || csbs!=r['CSBS']}">
            	<c:set value="1" var="i"></c:set>
            	<td class="left" style="background-color:white;">
                	${i }
            	</td>
            	
            	<c:set value="${i+1}" var="i"></c:set>
            </c:if>
        	<c:if test="${csbs==r['CSBS']}">
            <td class="left" style="background-color:white;">
                ${i }
            </td>
	        	<c:set value="${i+1}" var="i"></c:set>
            </c:if>
            <td class="left" style="background-color:white;">
                	<c:if test="${r['LSDMC']=='' || r['LSDMC']==null}">
                		--
                	</c:if>
                	<c:if test="${r['LSDMC']!='' && r['LSDMC']!=null}">
                		${r['LSDMC']}
                	</c:if>
                	
            </td>
        	<c:set value="${r['CSBS'] }" var="csbs"></c:set>
        	
            <!-- 根据零售店获取的每行数据 -->
        	<c:set value="${rs[4][r['LSDBS']] }" var="rData"></c:set>
            <c:forEach items="${rs[1]}" var="v" varStatus="ss">    
	            	
	            		<td  class="data">
	            	
	            	<c:if test="${rData[v['GGBS']]==null ||rData[v['GGBS']]=='' }">
	            		--
	            		
	            	</c:if>
	            	<c:if test="${rData[v['GGBS']]!=null && rData[v['GGBS']]!='' }">
	            		
		            		<fmt:formatNumber pattern="#,###.0">
			            		${rData[v['GGBS']] }
		            		</fmt:formatNumber>
	            	</c:if>
	            		</td>
	            
            </c:forEach>
            
        </tr>
        </c:forEach>
                
    </tbody>
</table>


 

 

 

这里需要注意的是，左边栏最右边的边框线可能会没有，在js代码中有一句
 

ColumnsWidth+=1;//左边栏最右侧边框1像素，不加则没有边框
 

 

 
 

这句话可以解决border为1px的线，一般都是1像素，如果多了自己加。
 


                

        

        

    




    

      

        

            

              
                
                  全栈编程网
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
js控制锁定表头表列

				
			

			

				

					04-03
				

			

		

		

			
				
js控制表头表列，这是一个例子，html，下载即用，非常简短的js控制，一定可以看懂

			
		

	



                

              
                



	

		

			

				
					
JS固定表头和左边列V2.0（源码）

				
			

			

				

					07-31
				

			

		

		

			
				
锁定表头及固定左边列，原生JS原创代码 需要注意的问题： 1.表格的宽度以及表格每一列的宽度需要固定...2.0 增加 window.onresize事件监听（当触发 window.onresize时自动重新固定表头）  增加左边固定位置鼠标滚轮事件

			
		

	



                


  
              

                


	

		

			

				
					
js固定表格表头（高扩展性）

				
			

			

				

					qq_36608036的博客
				

				

					04-29
					
					880
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doc

			
		

	





	

		

			

				
					
实现一个 AngularJS 的固定表头指令

				
			

			

				

					一群专业码农的笔记本
				

				

					02-16
					
					2938
					
				

			

		

		

			
				
1 前言

在前端业务开发中经常需要在页面上创建一个内容超级多的 Table，用户操作时如果将页面滚动到页中就会导致不知道当前列的列头名称或者无法横向滚动到想找的列。

针对这种情况，我暂时想到了这几种处理方案：


将 Table 框定在一个固定宽高的 DIV 中，这个 DIV 会出现纵向或横向滚动条；
让 Table 有多宽就显示多宽，这样子页面可能会出现横向滚动条和纵向滚动条，在纵向滚动条滚...

			
		

	



		

			
		



	

		

			

				
					
js 固定表头

				
			

			

				

					iteye_19878的博客
				

				

					11-14
					
					115
					
				

			

		

		

			
				
/*********************************
** 名称:JQeury实现表格行列冻结
**
** 作者:杨积江
**
** 时间:2114年4月16日
**
** 联系:yangjijiang@sina.cn
**
** 描述:类似Excel中的冻结窗格功能.建议给出表头固定宽度,所有单元格的高度,指定表格宽度;
*****************************...

			
		

	





	

		

			

				
					
JS实现table表格固定表头且表头随横向滚动而滚动

				
			

			

				

					10-19
				

			

		

		

			
				
主要介绍了JS实现table表格固定表头且表头可以随横向滚动而滚动,需要的朋友可以参考下

			
		

	





	

		

			

				
					
JS实现的表头列头固定页面功能示例

				
			

			

				

					10-20
				

			

		

		

			
				
2. **CSS样式设置**：为固定表头或列头设置合适的CSS样式，如固定定位（position: fixed）和宽度、高度等。  例如： ```css .fixedHeader {  position: fixed;  top: 0;  left: 0;  width: 100%; } ```  3. **...

			
		

	





	

		

			

				
					
JS固定表头和左边列（最新源码）1.9

				
			

			

				

					03-31
				

			

		

		

			
				
锁定表头及固定左边列，原生JS原创代码    需要注意的问题：  1.表格的宽度以及表格每一列的宽度需要固定（特殊情况除外：当表格列数少并且表格总宽度明显小于表格父容器的宽度时，也就是表格列不存在自动换行的问题...

			
		

	





	

		

			

				
					
JS锁定表头锁定列1.4

				
			

			

				

					11-24
				

			

		

		

			
				
在JavaScript（JS）开发中，有时我们需要创建动态的、可操作的数据展示表格，尤其是在处理大量数据时，表头和特定列的锁定功能显得尤为重要。"JS锁定表头锁定列1.4"是一个针对这种情况的解决方案，它允许用户在滚动...

			
		

	





	

		

			

				
					
JS冻结表格,锁定表头,固定行列（上下左右4个方向）

				
			

			

				

					11-12
				

			

		

		

			
				
JS冻结窗格（表头锁定）插件，自适应表格单元格宽度，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器），代码调用方式 $.frozen(tableElement或tableId,{参数...},force:是否强制冻结，因为有防止重复冻结功能)，调用方法比较简单，具体调用方法请参考示例。

			
		

	





	

		

			

				
					
js table固定表头,固定列,全浏览器兼容

				
			

			

				

					05-05
				

			

		

		

			
				
js table固定表头,固定列,全浏览器兼容，IE支持IE8以上的浏览器。

			
		

	





	

		

			

				
					
表头锁定js (基于Jquery)

				
			

			

				

					03-19
				

			

		

		

			
				
简单载入js文件即可实现表头锁定功能呢。
此js基于Jquery。
相见包中demo文件夹 test.html 测试页面

			
		

	





	

		

			

				
					
前端-页面图表-表头固定(JS实现)

				
			

			

				

					chansanity的博客
				

				

					10-24
					
					2516
					
				

			

		

		

			
				
html
<div class="small-table">
     <table cellspacing="0">
        <thead>
             <tr>
               <td>质控点编号</td>
               <td>质控点名称</td>
               <td>车身组件名称</d>
            

			
		

	





	

		

			

				
					
bootstrapTable通过js加载到设置固定表头宽度

				
			

			

				

					Aurevoir1993的博客
				

				

					06-02
					
					1万+
					
				

			

		

		

			
				
一、bootstrapTable通过js加载方法：
1、html中代码：

	
2、js中调用

$(function() {
initTable();
initDate();
});


function initDate(){
$('.date-picker').datepicker({autoclose:true}).next().on(ace.click_event,

			
		

	





	

		

			

				
					
固定表头和第一列、内容可滚动的table表格

					
热门推荐

				
			

			

				

					韭菜的故事
				

				

					07-25
					
					1万+
					
				

			

		

		

			
				

  本文首发https://www.jianshu.com/p/61c52ffced0c


  鉴于之前有几个项目都用到了第一行第一列固定不动的表格，所以整理了一下制作这种表格的方法。 
  基本原理是把表格分为四个部分，左上角是固定不动的，第一行和第一列是半固定的，只能左右移动或者上下移动，而右下角部分则是可以左右上下滑动，第一行和第一列根据右下角部分的移动来动态设置scrollLeft和s...

			
		

	





	

		

			

				
					
jquery固定表头不滚动让内容滚动的代码实现

				
			

			

				

					ying890的专栏
				

				

					01-30
					
					2265
					
				

			

		

		

			
				
http://www.codefans.net/jscss/code/4717.shtml

			
		

	





	

		

			

				
					
js 固定表头和列

					
最新发布

				
			

			

				

					05-24
				

			

		

		

			
				
因此，建议使用 JavaScript 来实现固定表头和列的效果。以下是一种实现方式：  1. 获取表格元素和表头元素  ```javascript var table = document.getElementById("myTable"); var header = table....

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值