让table表头固定,tr超出指定条数后无缝上下循环滚动jquery效果代码
2021-02-11 19:18
标签:pad scroll tables 表头 使用 this 引用 Fix pen 使用的时候引用一下jquery.js 具体代码如下: 让table表头固定,tr超出指定条数后无缝上下循环滚动jquery效果代码 标签:pad scroll tables 表头 使用 this 引用 Fix pen 原文地址:https://www.cnblogs.com/023cq/p/13039474.htmldiv 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效果代码
文章链接:http://soscw.com/index.php/essay/54140.html