chenglideyueguang

表格固定列固定表头插件结合css3

/*20170628固定表格列*/
;(function($){
$.fn.Scrollhanle=function(set){
var opt=$.extend({
size:3
},set||{});
return this.each(function(){
var sleft=$(this);
var $color=\'#FFF\';
var $headtr=sleft.find(\'thead>tr\');
var $tbody=sleft.find(\'tbody tr\');
sleft.scroll(function(){
var scrollTopval=sleft.scrollTop();
var scrollLeftval=sleft.scrollLeft();
$headtr.css(\'background\',$color)[0].style.transform=\'translateY(\'+scrollTopval+\'px)\';
if(scrollLeftval>=0){
$tbody.each(function(e){
$color2=$(this).css(\'background-color\');
$(this).children(\'td\').slice(0,opt.size).each(function(index){
$headtr.children(\'th\').eq(index).css(\'background\',$color)[0].style.transform=\'translateX(\'+scrollLeftval+\'px)\';
$(this).css(\'background\',$color2)[0].style.transform=\'translateX(\'+scrollLeftval+\'px)\';
})
})
}
})

})

}
})(jQuery)
 

  

分类:

技术点:

相关文章: