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

Posted 023cq

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了让table表头固定,tr超出指定条数后无缝上下循环滚动jquery效果代码相关的知识,希望对你有一定的参考价值。

使用的时候引用一下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效果代码的主要内容,如果未能解决你的问题,请参考以下文章

如何使DIV的高度固定,当超出固定高度时,让文字自动上下循环滚动

table固定表头固定列实现横向纵向滚动

很急GridView固定表头和指定列

如何固定table的表头

HTML:table固定表头

HTML或JS代码如何实现让一个table的表头不动,body可以自由上下左右滚动,同时保持表头与body的宽度一致?