您的位置:首页帮助教程

JS网站表格头部固定悬浮 TABLE下拉表头固定方法

2018-05-30

企业网站建设中遇到一个问题,表格很长时,需要像EXCEL一样可以固定表头,以便浏览,该这么做呢?其实只要页面滚动时在顶端悬浮一个表头就可以,这很简单,但是我们还需要悬浮表头每一列的宽度和原来的表头一样,这就要麻烦一点,Jquery方法如下:

  var sourceTable = $("#cat_list");//设置表格的ID

  var sourceTableHead = $("#table_head");//设置表格的头部行 thead tr 的ID

  var headHeight = sourceTableHead.height();//获取表格头行的高度

  var sourceTableWidth = sourceTable.outerWidth(); //获取表格的宽度

  //在网站主页面创建一个DIV,DIV包含带表头的表格

  $('body').append('<div id="shelter"><table id="fixed_table"  border="0" cellpadding="4" cellspacing="0" class="table table-bordered table-hover"><thead></thead></table></div>');

  //给DIV设置CSS

  $("#shelter").css({'height':headHeight,'position':'fixed','top':'0','left':'0'});

  //给表格设置一样的宽度

  $("#fixed_table").css({'width':sourceTableWidth+"px"});


  //克隆原表格头部并设置ID,追加到新表格的头部

  var targetHead = sourceTableHead.clone().attr('id','fix_head');

  targetHead.appendTo('#fixed_table thead');

  //设置新表格头部每一列和原表格头部一样的高宽

  $("#table_head th").each(function(index,value){

var tempWidth = $(value).outerWidth();

var tempHeight = $(value).outerHeight();

$("#fixed_table th").eq(index).css({'width':tempWidth+"px",'height':tempHeight+"px"});

  });

//先隐藏新表格

  $("#shelter").hide();

//滚动页面时

  $(window).scroll(function(){

//左滚动

var sl=-Math.max($('body').scrollLeft(),$('document').scrollLeft());

 if(isNaN(sl)){

     sl = - $(window).scrollLeft();

   }

$('#shelter').css("left",sl+'px');

var scroll_top = $(window).scrollTop() - sourceTable.offset().top;

//根据滚动的高度控制显示和隐藏

if (scroll_top > 0) {

  $('#shelter').show();

}else {

  $('#shelter').hide();

}

   });

});


相关内容

扫描二维码分享到微信

在线咨询
联系电话

15685180853