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