水平和竖直滑动条捆绑,表头固定的实现

时间:2022-04-15 06:35:50

  首先,在很多的网页数据分析或者网站查询数据库的操作中,我们不可避免需要在前端页面中展示所有数据。由于版面构建的问题,导致div内容模块大小,不足以容纳所有数据,这时候我们就必须考虑引入页面的水平或者竖直滚动条。这样能够实现在固定大小的div中,通过滑动滚动条来对所有数据进行检索。这时,我们会发现,如果表头不被固定,我们滑动滚动条时,不能很好的确定当前数据属于什么列是什么样的数据。

  所以,在这里我分享一下通过js固定表头的页面操作:

1  //水平、垂直滚动条实现表头标题的固定
2       document.getElementById("table1").onscroll=function(e) {
3     document.getElementById("table2").scrollLeft = document.getElementById("table1_tbodyDiv").scrollLeft;
4 };

   关键代码如上诉。这里我说的是,动态获取后台json数据,动态生成表格的模型。首先我们需要建立两个table模型,table1为表头,table2为内容。最后把两张表设置成有滚动条,并且把table1的滚动条事件隐藏,并绑定到table2的滚动事件上。这样就能达到我们的效果。