让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效果代码

上一篇:WebLogic11g-常用运维操作


下一篇:tomcat 上传文件权限不足