js实现表头不动,表格内容无限循环滚动

js实现表头不动,表格内容无限循环滚动_第1张图片

表头不动,只有内容无限循环滚动,代码如下:
html部分:

<div class="content">
    <div class="header">
        <div>组织排名div>
        <div>组织名称div>
        <div>组织积分div>
    div>
    <div class="data">
        <div class="data-content">
            <table class="table">

            table>
        div>
        <div class="data-footer">div>
    div>

css部分:

  .table{
        width: 100%;
    }
    .content {
        width: 434px;
        height: 182px;
        outline: 1px solid #e5e5e5;
        overflow: hidden;
    }
    .data-content tr:nth-child(odd){
        background-color: #f6fafd;
    }
    .data-content tr:nth-child(even){
        background-color: #ffffff;
    }
    .data {
        height: 180px;
        overflow: hidden;
    }
    .header {
        line-height: 30px;
        padding-left: 16px;
        padding-right: 16px;
        background-color: #e9eef4;
        display: flex;
        justify-content: space-between;
    }
    .rows{
        padding: 0;
        height: 38px;
        text-align: center;
        line-height: 38px;
    }
    .table tbody tr{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between; 
    }

js部分:

<script src="./jquery-1.12.4.js"></script>
        <script>
         let html = '';
            for (let i = 0; i < 15; i++) {
                html += "";
                html += `${i + 1}`;
                html += "组织名称"
                html += "1234";
                html += "";
            }
            $('.table').html(html);
            $('table td').addClass('rows');
            let dataDOM = $('.data')[0];
            let dataContentDOM = $('.data-content')[0];
            let dataFooterDOM = $('.data-footer')[0];
            let height = dataDOM.offsetTop + 				 dataDOM.offsetHeight;
            setInterval(function () {
                // 887-0-579
                if (dataFooterDOM.offsetTop -               dataDOM.scrollTop - height <= 0) {
                    dataDOM.scrollTop -= dataContentDOM.offsetHeight;
                } else {
                    dataDOM.scrollTop++;
                }
            }, 30);
        </script>

你可能感兴趣的:(js实现表头不动,表格内容无限循环滚动)