前端-页面图表-表头固定(JS实现)

Chansanity

于 2021-10-24 22:43:34 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：前端 javascript html5 1024程序员节

本文链接：https://blog.youkuaiyun.com/chansanity/article/details/120942907

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了一个JavaScript实现的HTML表格滚动同步功能。通过监听表格的滚动事件，动态调整thead的位置，以保持表头在滚动过程中始终可见。示例代码展示了如何在滚动时更新thead的transform属性，提供了一种优化用户界面的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<div class="small-table">
     <table cellspacing="0">
        <thead>
             <tr>
               <td>质控点编号</td>
               <td>质控点名称</td>
               <td>车身组件名称</d>
               <td>车身号</td>
               <td>缺陷编号</td>
               <td>缺陷名称</td>
               <td>缺陷分析</td>
               <td>操作</td>
            </tr>
            </thead>
       <tbody id="bottom-mian-table"></tbody>
   </table>
</div>

Js

window.onload = function () {
        let tableCont = document.querySelector('.small-table');
        function scrollHandle(e) {
            let scrollTop = this.scrollTop;
            this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
        }

        tableCont.addEventListener('scroll', scrollHandle);
    }