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

2021-02-11 19:18

阅读:509

标签: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:30td>
                                td class="tac">第三开标室(重庆市)td>
                            tr>
                    
                            tr>
                                td>政府采购td>
                                td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目td>
                                td class="tac">08:40td>
                                td class="tac">第二开标室td>
                            tr>
                    
                            tr>
                                td>工程建设td>
                                td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目td>
                                td class="tac">09:00td>
                                td class="tac">第一开标室(重庆)td>
                            tr>
                    
                            tr>
                                td>政府采购td>
                                td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目td>
                                td class="tac">09:00td>
                                td class="tac">第一开标室(重庆)td>
                            tr>
                    
                            tr>
                                td>政府采购td>
                                td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目(二次)td>
                                td class="tac">09:00td>
                                td class="tac">第二开标室(重庆)td>
                            tr>
                    
                            tr>
                                td>政府采购td>
                                td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目td>
                                td class="tac">09:00td>
                                td class="tac">第二开标室(重庆)td>
                            tr>
                    
                            tr>
                                td>政府采购td>
                                td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目td>
                                td class="tac">09:30td>
                                td class="tac">第三开标室(重庆)td>
                            tr>
                    
                            tr>
                                td>政府采购td>
                                td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目td>
                                td class="tac">09:30td>
                                td class="tac">第一开标室(重庆)td>
                            tr>
                    
                            tr>
                                td>政府采购td>
                                td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目td>
                                td class="tac">10:00td>
                                td class="tac">第二开标室(重庆)td>
                            tr>
                    
                            tr>
                                td>政府采购td>
                                td class="txt-ell">建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目建设工程项目(二次)td>
                                td class="tac">10:30td>
                                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(
                                + $(#+ tableid + thead).html() +
).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


评论


亲,登录后才可以留言!