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);};