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