码迷,mamicode.com
首页 > Web开发 > 详细

让table表头固定,tr超出指定条数后无缝上下循环滚动jquery效果代码

时间:2020-06-03 20:30:44      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:pad   scroll   tables   表头   使用   this   引用   Fix   pen   

使用的时候引用一下jquery.js

具体代码如下:

<div class="tablebox clearfix">
                    <table id="tableId" class="cui-table tbg" border="0" cellspacing="0" cellpadding="0" style="word-wrap: break-word; word-break: break-all;">
                        <thead>
                            <tr>
                                <th style="width: 60px;">交易分类</th>
                                <th>项目名称</th>
                                <th style="width: 60px;">开标时间</th>
                                <th style="width: 150px;">评标室</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">08:30</td>
                                <td class="tac">第三开标室(重庆市)</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">08:40</td>
                                <td class="tac">第二开标室</td>
                            </tr>
                    
                            <tr>
                                <td>工程建设</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">09:00</td>
                                <td class="tac">第一开标室(重庆)</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">09:00</td>
                                <td class="tac">第一开标室(重庆)</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目(二次)</td>
                                <td class="tac">09:00</td>
                                <td class="tac">第二开标室(重庆)</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">09:00</td>
                                <td class="tac">第二开标室(重庆)</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">09:30</td>
                                <td class="tac">第三开标室(重庆)</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">09:30</td>
                                <td class="tac">第一开标室(重庆)</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目</td>
                                <td class="tac">10:00</td>
                                <td class="tac">第二开标室(重庆)</td>
                            </tr>
                    
                            <tr>
                                <td>政府采购</td>
                                <td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目(二次)</td>
                                <td class="tac">10:30</td>
                                <td class="tac">第三开标室(重庆)</td>
                            </tr>
                        </tbody>
                    </table>

                        <script>
                        // 参数1 tableID,参数2 div高度,参数3 速度,参数4 tbody中tr几条以上滚动
                        tableScroll(tableId, 400, 30, 6)
                        var MyMarhq;
                        
                        function tableScroll(tableid, hei, speed, len) {
                            clearTimeout(MyMarhq);
                            $(# + tableid).parent().find(.tableid_).remove()
                            $(# + tableid).parent().prepend(
                                <table class="tableid_ cui-table tbg"><thead> + $(# + tableid +  thead).html() + </thead></table>
                            ).css({
                                position: relative,
                                overflow: hidden,
                                height: hei + px
                            })
                            $(".tableid_").find(th).each(function(i) {
                                $(this).css(width, $(# + tableid).find(th:eq( + i + )).width());
                            });
                            $(".tableid_").css({
                                position: absolute,
                                top: 0,
                                left: 0,
                                z-index: 9
                            })
                            $(# + tableid).css({
                                position: absolute,
                                top: 0,
                                left: 0,
                                z-index: 1
                            })
                        
                            if ($(# + tableid).find(tbody tr).length > len) {
                                $(# + tableid).find(tbody).html($(# + tableid).find(tbody).html() + $(# + tableid).find(tbody).html());
                                $(".tableid_").css(top, 0);
                                $(# + tableid).css(top, 0);
                                var tblTop = 0;
                                var outerHeight = $(# + tableid).find(tbody).find("tr").outerHeight();
                        
                                function Marqueehq() {
                                    if (tblTop <= -outerHeight * $(# + tableid).find(tbody).find("tr").length) {
                                        tblTop = 0;
                                    } else {
                                        tblTop -= 1;
                                    }
                                    $(# + tableid).css(margin-top, tblTop + px);
                                    clearTimeout(MyMarhq);
                                    MyMarhq = setTimeout(function() {
                                        Marqueehq()
                                    }, speed);
                                }
                        
                                MyMarhq = setTimeout(Marqueehq, speed);
                                $(# + tableid).find(tbody).hover(function() {
                                    clearTimeout(MyMarhq);
                                }, function() {
                                    clearTimeout(MyMarhq);
                                    if ($(# + tableid).find(tbody tr).length > len) {
                                        MyMarhq = setTimeout(Marqueehq, speed);
                                    }
                                })
                            }
                        
                        }
                        </script>
                    </div>

 

让table表头固定,tr超出指定条数后无缝上下循环滚动jquery效果代码

标签:pad   scroll   tables   表头   使用   this   引用   Fix   pen   

原文地址:https://www.cnblogs.com/023cq/p/13039474.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!