滚动表格行列跟随移动

最新推荐文章于 2023-03-11 20:17:42 发布

Source-Man

最新推荐文章于 2023-03-11 20:17:42 发布

阅读量758

点赞数

分类专栏： javascript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_18279123/article/details/78270841

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

共通的js代码 tabView.js

/**
* 滚动表格首行首列跟随（需要再表格外层套class为.table-wrap的div）
* 需要给横向滚动列的表头列一个id-用来获取当前列滚动位置
*/
var tabView = {
   columnName:"",//获取偏移的列id名
   witchColumn:0,//表格中固定的列数（第几列下标，从0开始，隐藏列也算在内）
   suff:15,//偏移量（误差值）
   witchColumns:[],//需要固定的多列，传入下表数组（从0开始，隐藏列也算在内）
   init : function(columnName,witchColumn,suff,witchColumns){

       tabView.columnName = columnName;
       tabView.witchColumn = witchColumn;
       tabView.witchColumns = witchColumns;
       if(suff != null && suff !=""){
           tabView.suff = suff;
       }
   },

   tableMove : function(){
       var l = $("#"+tabView.columnName).position().left;
       $(".table-wrap").scroll(function() {
           var left = $(".table-wrap").scrollLeft();
           var top = this.scrollTop;
           var trArr=$(".table-wrap table tr");
           var thArr=$(".table-wrap table thead tr th");
           left = left - l + tabView.suff;
           if(left<=0){
               left = 0;
           }
           trArr.each(function(){

               $(this).children().eq(tabView.witchColumn).css({"position":"relative","top":"0px","left":left,"z-index":3});

           });
           thArr.each(function(index){
               $(this).css({"position":"relative","top":top,"left":"0px","z-index":9});
               if(index == tabView.witchColumn){
                   $(this).css({"position":"relative","top":top,"left":left,"z-index":99});
               }

           });
       });
   },
   tableAllMove : function(){
       $(".table-wrap").scroll(function() {
           var left = $(".table-wrap").scrollLeft();
           var top = this.scrollTop;
           var trArr=$(".table-wrap table tr");
           var thArr=$(".table-wrap table thead tr th");
           trArr.each(function(){
               for(var i=0;i<tabView.witchColumns.length;i++){
                   var c = tabView.witchColumns[i];
                   $(this).children().eq(c).css({"position":"relative","top":"0px","left":left,"z-index":3});
               }

           });
           thArr.each(function(index){
               $(this).css({"position":"relative","top":top,"left":"0px","z-index":9});
               for(var i=0;i<tabView.witchColumns.length;i++){
                   if(index == tabView.witchColumns[i]){
                       $(this).css({"position":"relative","top":top,"left":left,"z-index":99});
                   }
               }
           });
       });
   }
}

html页面代码示例