html 列表循环滚动，动态初始化字段数据

html

<div class="layui-row">
                <div class="layui-col-md4">
                    <div class="boxall">
                        <div class="alltitle">超时菜品排行</div>
                        <div class="marquee-container">
                            <div class="scroll-wrapper">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>排序</th>
                                            <th>菜品名称</th>
                                            <th>次数</th>
                                            <th>KDS</th>
                                        </tr>
                                    </thead>
                                </table>
                                <div class="scroll-wrapper">
                                    <div class="scroll-content">
                                        <table>
                                            <tbody id="tbody_csph">
                                               
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="boxfoot"></div>
                    </div>
                </div>

<tbody id="tbody_csph">

css 滚动代码

/*滚动表格实现*/

.marquee-container {
    width: 100%;
    margin: 30px auto;
    border: 0px solid #ccc;
    overflow: hidden;
    position: relative;
}

.scroll-wrapper {
    height: 400px;
    overflow: hidden;
    position: relative;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th {
    position: sticky;
    top: 0;
    background: rgba(187, 25, 25, 0.8); /* 最后一位是透明度 */
    color: rgb(234, 235, 243);
    padding: 15px;
    text-align: center;
    z-index: 2;
}

td {
    padding: 12px;
    text-align: center;
    border-bottom: 0px solid #ecf0f1;
    /* background: rgba(187, 25, 25, 0.8); 最后一位是透明度 */
}

tr:nth-child(even) {
    background-color: #0d59a5;
}

/* 自动滚动动画 */
@keyframes autoScroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

.scroll-content {
    animation: autoScroll 15s linear infinite;
}

.scroll-content:hover {
    animation-play-state: paused;
}

js

function loadcsph() {
            var formData = <?php echo json_encode($formData, JSON_UNESCAPED_UNICODE); ?>; //Don't forget the extra semicolon!;

            const now = new Date();

            const year = now.getFullYear();
            const month = ('0' + (now.getMonth() + 1)).slice(-2);
            const day = ('0' + now.getDate()).slice(-2);
            const hours = ('0' + now.getHours()).slice(-2);
            const minutes = ('0' + now.getMinutes()).slice(-2);
            const seconds = ('0' + now.getSeconds()).slice(-2);

            const formattedTime = year +'-' + month +'-' + day ;

            formData.expFromDate = formattedTime;
            formData.expToDate = formattedTime;
            formData.isfee = 0;
            formData.uCloudID = formData.uCurCloudID;

            layui.use(['jquery', 'common'], function () {
                common = layui.common;
                const $ = layui.$;
                $.ajax({
                    type: "POST",
                    url: "/report/CxtCSRanking/",
                    data: formData,
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.code == 10000) {
                            renderData(data.data.dbData);
                        }
                    
                    }
                });

            });
        };


   // 渲染表格
   function renderData(data) {
        const tbody = document.getElementById('tbody_csph');
        const fragment = document.createDocumentFragment();
        
        // 清空现有内容
        tbody.innerHTML = '';
        
        // 创建新行
        data.forEach(item => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${item.RowNo}</td>
                <td>${item.DishName}</td>
                <td>${item.qty}</td>
                <td>${item.jq}</td>
            `;
            fragment.appendChild(tr);
        });
        
        // 克隆数据实现无缝滚动
        // fragment.appendChild(fragment.cloneNode(true));
        tbody.appendChild(fragment);
    };