jquery实现表头固定表格自滚动

最新推荐文章于 2021-08-25 11:46:11 发布

猫化

最新推荐文章于 2021-08-25 11:46:11 发布

阅读量1.3k

点赞数 1

分类专栏：前端编写(推荐) 文章标签： jquery 列表 html java js

I from China

本文链接：https://blog.csdn.net/weixin_43701595/article/details/106436568

版权

这篇博客分享了如何利用jQuery实现一个简单的固定表头滚动表格，代码简洁，适用于处理大量数据展示。作者提醒读者理解表格的基本结构，并提供了源码示例。

摘要由CSDN通过智能技术生成

随着阅览文章无数终于让我找到了废话不多说上代码

我们可以看到,这里引用了一个本地的jquery.min.js文件,需要的小伙伴还请去百度上自行下载
接下来是js,没错,没有花里胡哨的css
仅仅是在div上面加了一个id <div id="scroll_table" class="col-md-12 bottom_half" >
以及tbody上加了一个id <tbody id="kbTable" >

这里说一下,是因为,有的小萌新只知道复制粘贴,也不看源码
<div> 这是一个盒子模型吧
<table>这是一个表格吧
<thead>表格里面得有个表头吧</thead>
<tbody>除了表头还都有显示数据的表身吧</tbody>
</table>
</div>

来来来,我们再说一下,表头里面用啥tr th吖
表身呢 tr td吖
为了显示动态的滚动,是不是数据得变
得,直接看源码吧:

<html>
           <head>
                   <script type="text/javascript" src="./jquery.min.js"></script>
        <script type="text/javascript">
        
        $(function() {
    
            var $this = $("#scroll_table");
            var scrollTimer;
            $this.hover(function() {
    
                clearInterval(scrollTimer);
            }, function() {
    
                scrollTimer = setInterval(function() {
    
                    scrollNews($this);
                }, 200);
            }).trigger("mouseleave");
        
            function scrollNews(obj) {
    
                var $self = obj.find("tbody");
                var lineHeight = $self.find("tr:first").height();
                $self.animate({
    
                    "marginTop": -lineHeight + "px"
                }, 600, function() {
    
                    $self.css({
    
                        marginTop: 0
                    }).find("tr:first").appendTo($self);
                })
            }
        })
        
        </script>
           </head>
           <body>
                  <div id="scroll_table" class="col-md-12 bottom_half" >
            <table width="100%">
                <thead>
                    <tr>
                        <th>生产线</th>
                        <th>状态</th>
                        <th>操作人</th>
                        <th>订单号</th>
                        <th>工序</th>
                        <th>在产产品名</th>
                        <th>在产批次</th>
                        <th>计划产量（kg）</th>
                        <th>