运用jQuery冻结table表头

在网页中，如果表哥数据量在两个维度上都较大时是不便于查看数据的，如果能够像excel那样冻结表头将有助于提高数据查阅的体验和效率。目前可够选择的解决方案很多，如果不希望引入过多的第三方库，那么运用jQuery也可以实现简单的表格表头冻结。

• 构建一个简单的表格

    
        
        
        
        
        

        
        
        
    
    
        

            

                

                    
id
                    
name
                    
age
                    
sex
                    
posotion
                    
introduction
                
            
            

                
                

                    
1
                    
stone
                    
12
                    
male
                    
manager
                    
a man
                
            
        

        
        
        
        
    

简单的表格.gif

• 另外创建一个一模一样的只有表头的表并将这个表格固定在页面顶部

    

        

            
id
            
name
            
age
            
sex
            
posotion
            
introduction
        
    

• 页面滚动到主表格表头消失的时候显示附表

滚动.gif

• 调整附表表头宽度和主表一致

$('#head-table').find('th').each(function(){
    $(this).width($('#main-table').find('th:eq(' + $(this).index() + ')').width());
});

调整附表表头宽度和主表一致.gif

• 为附表头加上背景颜色

    

        

            
id
            
name
            
age
            
sex
            
posotion
            
introduction
        
    

为附表头加上背景颜色 .gif

• 完整代码

    
        
        
        
        
        

        
        
        
    
    
        

            

                

                    
id
                    
name
                    
age
                    
sex
                    
posotion
                    
introduction
                
            
            

                
                

                    
1
                    
stone
                    
12
                    
male
                    
manager
                    
a man
                
            
        
        

            

                

                    
id
                    
name
                    
age
                    
sex
                    
posotion
                    
introduction
                
            
        

        
        
        
        
        
    

本文首发于公众号：programmer_cc，转载请注明出处。

微信公众号.jpg