背景:项目是做大屏需要在表格上做一些表格实时滚动播放,这时候以下可以快速帮你实现此功能,话不多说,直接展示~
以下是html部分:
<table class="HSErightcontent-table-content2" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<thead>
<tr>
<th align="center" width="10%">序号</th>
<th align="center" width="30%">名称</th>
<th align="center" width="15%">国别</th>
<th align="center" width="15%">总部</th>
<th align="center" width="15%">单位</th>
<th align="center" width="15%">经理</th>
</tr>
</thead>
<tbody id="project_table_tbody"></tbody>
</table>
以下是封装了一个表格滚动的js方法:
注意:#project_table_tbody是我命名的table的名字
function scrollPlayback(){
let text = $("#project_table_tbody:first");
let clear; //定义需要清除动画的部分
$("#project_table_tbody>tr:odd").addClass("odd");
//添加鼠标悬停事件
text.hover(function () {
clearInterval(clear);
}, function () {
clear = setInterval(function () {
let findText= text.find("tr:first");
let textHeight= findText.height();
text.animate({
marginTop: -textHeight + "px"
}, 600, function () {
//清除margin值
findText.css("marginTop", 0).appendTo(text);
text.css("marginTop", 0);
})
}, 1000) //滚动间隔时间
}).trigger("mouseleave");
}
在动态渲染表格后再调用以上js方法:
var tobdyHtml = ''
if(projectListByNotFilled.length == 0){
tobdyHtml += '<tr>' + '<td align="center" colspan="6">暂无数据</td>' + '<tr>'
}else{
for(var i = 0,len = projectListByNotFilled.length;i < len;i ++){
tobdyHtml += '<tr>' +
'<td align="center" title="' + (i + 1) + '">' + (i + 1) + '</td>' +
'<td align="center" title="' + projectListByNotFilled[i].projectName + '">' + projectListByNotFilled[i].projectName + '</td>' +
'<td align="center" title="' + projectListByNotFilled[i].projectCountry + '">' + projectListByNotFilled[i].projectCountry + '</td>' +
'<td align="center" title="' + projectListByNotFilled[i].region + '">' + projectListByNotFilled[i].region + '</td>' +
'<td align="center" title="' + projectListByNotFilled[i].orgName + '">' + projectListByNotFilled[i].orgName + '</td>' +
'<td align="center" title="' + projectListByNotFilled[i].projectManager + '">' + projectListByNotFilled[i].projectManager + '</td>'
}
}
// 渲染
$('#project_table_tbody').empty().append(tobdyHtml)
//调用
scrollPlayback()
css最好将表格的overflow设置为hidden以上就可以做出表格自动滚动的效果啦