前端js+css表格自动滚动播放-方法

背景：项目是做大屏需要在表格上做一些表格实时滚动播放，这时候以下可以快速帮你实现此功能，话不多说，直接展示~

以下是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以上就可以做出表格自动滚动的效果啦