前端表格滚动显示

技术支持：

定时任务（setInterval函数，clearInterval函数），CSS()方法；

HTML代码：

<div class="tablebox">
    <div class="tbl-header status-header">
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th style="width: 60%;">名称</th>
                <th style="width: 20%;">数量</th>
                <th style="width: 20%;">单位</th>
            </tr>
            </thead>
            <tbody style="opacity:0;"></tbody>
        </table>
    </div>

    <div class="tbl-body status-body">
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th style="width: 60%;">名称</th>
                <th style="width: 20%;">数量</th>
                <th style="width: 20%;">单位</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

css代码

.tablebox {
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin:0;
    background: none;
}

.tbl-header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
}

.tbl-body {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.tablebox table {
    width: 100%;
}

.tablebox table th,
.tablebox table td {
    font-size: 14px;
    color: #aff2ff;
    line-height: 30px;
    text-align: center;
}

.tablebox table tr th {
    background: #0e4d69;
    cursor: pointer;
}

.tablebox table tr td {
    background-color: #0e4b67;
}

.tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {
    background: none;
}

.tablebox table tr td span,
.tablebox table tr td span {
    font-size: 24px;
}

js代码

var Marqueehq_status_status = '';
clearInterval(Marqueehq_status_status);
$('.status-body tbody').empty();
$('.status-header tbody').empty();
var str = '';
var Items = [
    {"name":"物料X","account":"100","danwie":"kg","color":"1"},
    {"name":"物料A","account":"100","danwie":"kg","color":"2"},
    {"name":"物料B","account":"100","danwie":"kg","color":"1"},
    {"name":"物料V","account":"100","danwie":"kg","color":"3"},
    {"name":"物料C","account":"100","danwie":"kg","color":"1"},
    {"name":"物料D","account":"100","danwie":"kg","color":"2"},
    {"name":"物料Q","account":"100","danwie":"kg","color":"2"},
    {"name":"物料W","account":"100","danwie":"kg","color":"3"},
    {"name":"物料E","account":"100","danwie":"kg","color":"1"},
    {"name":"物料R","account":"100","danwie":"kg","color":"3"},
    {"name":"物料T","account":"100","danwie":"kg","color":"3"},
    {"name":"物料X","account":"100","danwie":"kg","color":"1"},
    {"name":"物料A","account":"100","danwie":"kg","color":"2"},
    {"name":"物料B","account":"100","danwie":"kg","color":"1"},
    {"name":"物料V","account":"100","danwie":"kg","color":"3"},
    {"name":"物料C","account":"100","danwie":"kg","color":"1"},
    {"name":"物料D","account":"100","danwie":"kg","color":"2"},
    {"name":"物料Q","account":"100","danwie":"kg","color":"2"},
    {"name":"物料W","account":"100","danwie":"kg","color":"3"},
    {"name":"物料E","account":"100","danwie":"kg","color":"1"},
    {"name":"物料R","account":"100","danwie":"kg","color":"3"},
    {"name":"物料T","account":"100","danwie":"kg","color":"3"},



]
$.each(Items,function (i, item) {
        str = '<tr>'+
            '<td>'+item.name+'</td>'+
            '<td>'+item.account+'</td>'+
            '<td>'+item.danwie+'</td>'+
            '</tr>'

        $('.status-body tbody').append(str);
        $('.status-header tbody').append(str);
});

if(Items.length >= 10){
    debugger
    $('.status-body tbody').html($('.status-body tbody').html()+$('.status-body tbody').html());
    $('.status-body').css('top', '0');
    var tblTop1 = 0;
    var speedhq_status = 50; // 数值越大越慢
    var outerHeight = $('.status-body tbody').find("tr").outerHeight();
    function Marqueehq_status(){
        if(tblTop1<= -outerHeight*Items.length){
            tblTop1 = 0;
        } else {
            tblTop1 -= 1;
        }
        $('.status-body').css('top', tblTop1+'px');
    }

    Marqueehq_status_status = setInterval(Marqueehq_status,speedhq_status);

    // 鼠标移上去取消事件
    $(".status-header tbody").hover(function (){
        clearInterval(Marqueehq_status_status);
    },function (){
        clearInterval(Marqueehq_status_status);
        Marqueehq_status_status = setInterval(Marqueehq_status,speedhq_status);
    })

}

主要代码

$('.status-body tbody').html($('.status-body tbody').html()+$('.status-body tbody').html());
$('.status-body').css('top', '0');
var tblTop1 = 0;
var speedhq_status = 50; // 数值越大越慢
var outerHeight = $('.status-body tbody').find("tr").outerHeight();//获取tr高度
function Marqueehq_status(){ //tbody上移
    if(tblTop1<= -outerHeight*Items.length){
        tblTop1 = 0;
    } else {
        tblTop1 -= 1;
    }
    $('.status-body').css('top', tblTop1+'px');
}

Marqueehq_status_status = setInterval(Marqueehq_status,speedhq_status);