码上敲享录 > vue.js常见问题详解 > 实现table行和列表头固定不滚动,太简单了

实现table行和列表头固定不滚动,太简单了

上一章章节目录下一章 2020-09-14已有2254人阅读 评论(0)

实现table行和列表头固定不滚动,太简单了


解决方法:

var _this=this

$(".count-list").scroll(function(){//给table外面的div滚动事件绑定一个函数

var left=$(".count-list").scrollLeft();//获取滚动的距离

var top=$(".count-list").scrollTop();//获取滚动的距离

var trs=$(".count-list table tr");//获取表格的所有tr

trs.each(function(i){//对每一个tr(每一行)进行处理    

           if(i<=2){

             $(this).children().css({"position":"relative","top":top,"background-color":"rgb(134,147,243)",border:"1px solid gray",color:"white"});

           }

           $(this).children().each(function(j){

             if($(this).find("input").length<=0&&i>2) {

               $(this).css({"position":"relative","left":left,"background-color":"rgb(134,147,243)",border:"1px solid gray",color:"white"});

             }

           })

       });

     });


上面代码把table前面两行设置不滚动,不滚动的列的获取我是通过一个标识来获取的,比如 if($(this).find("input").length<=0&&i>2),在当前tr的td里没有input输入框的td就设置固定。count-list是table外部产生滚动条的标签


1

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交