JS实现Table表格数据跑马灯效果

工作中会经常碰到数据可视化看板需求，表格是最常用的展示方式，数据量大时会用到超出高度自行滚动，跑马灯效果展示是最好的，一般实现跑马灯效果会使用插件，但是会用到许多样式不协调问题，文章主要是用少量代码实现表格数据跑马灯效果

<!-- 在index.ftl文件中使用table标签 -->
<div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>品号</th>
                    <th>品名</th>
                    <th>规格</th>
                    <th>拣选信息</th>
                    <th>当前进度</th>
                    <th>仓库名称</th>
                </tr>
            </thead>
            <tbody id="dataTableBody">
            <!-- 动态插入行 -->
            </tbody>
        </table>
    </div>

<!-- 在index.ftl文件中引入js文件 -->
<script language="JavaScript" type="text/javascript" src="${base}/bigscreen/**/js/index.js"></script>

index.js文件

$(document).ready(function () {
    // 初始化看板数据
    handleResponse (mockRes);
    // 初始化滚动效果
    scrollTable();
});


// 示例数据源
const dataSource = {
    items: [
        { id: 1, itemCode: "65611A", itemName: "洗剂1 200L", spec: "200L", pickInfo: "已拣选", progress: "完成", warehouse: "成品仓库I" },
        { id: 2, itemCode: "65613A", itemName: "洗剂2 200L", spec: "200L", pickInfo: "未拣选", progress: "进行中", warehouse: "成品仓库I" },
        { id: 3, itemCode: "65609A", itemName: "洗剂3 200L", spec: "200L", pickInfo: "未拣选", progress: "进行中", warehouse: "成品仓库I" },
        { id: 4, itemCode: "65474C", itemName: "洗衣粉1 25KG", spec: "25KG", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库I" },
        { id: 5, itemCode: "65474C", itemName: "洗衣粉2 25KG", spec: "25KG", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库I" },
        { id: 6, itemCode: "65478C", itemName: "漂剂 25KG", spec: "25KG", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库I" },
        { id: 7, itemCode: "65478C", itemName: "彩漂剂 25KG", spec: "25KG", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库I" },
        { id: 8, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 9, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 10, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 11, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 12, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 13, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 2, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 2, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        // 更多...
    ]
};

// 在开发环境中模拟响应
const mockRes = {
    data: {
        items: dataSource.items,
    }
};

// 填充清单表格数据
const handleResponse = (res) => {
    const tableBody = document.getElementById('dataTableBody');
    tableBody.innerHTML = ''; // 清空旧数据

// 假设 data.items 是包含多个条目的数组
    data.items.forEach((item, index) => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${index + 1}</td>
      <td>${item.itemCode || ''}</td>
      <td>${item.itemName || ''}</td>
      <td>${item.spec || ''}</td>
      <td>${item.pickInfo || ''}</td>
      <td>${item.progress || ''}</td>
      <td>${item.warehouse || ''}</td>
      `;
      tableBody.appendChild(row);
    });
};


//循环展示数据
function scrollTable() {
    const container = document.querySelector('.table-container');
    const tableBody = document.getElementById('dataTableBody');
    const rows = Array.from(tableBody.querySelectorAll('tr'));
    const scrollAmount = 2; // 每次滚动的像素数

    // 滚动表格
    container.scrollTop += scrollAmount;

    // 获取第一个和最后一个可见的行
    const firstVisibleRow = rows.find(row => row.getBoundingClientRect().top >=         
    container.getBoundingClientRect().top);
    const lastVisibleRow = rows.find(row => row.getBoundingClientRect().bottom <= 
    container.getBoundingClientRect().bottom + container.scrollTop);

    // 如果最后一个可见行已经滚动出视图，则将第一行移动到末尾
    if (!lastVisibleRow || lastVisibleRow.getBoundingClientRect().bottom < 
    container.getBoundingClientRect().top) {
        if (rows.length > 0) {
            const firstRow = rows[0];
            tableBody.appendChild(firstRow); // 将第一行移动到末尾
        }
    }

    // 递归调用函数以持续滚动
    setTimeout(scrollTable, 100); // 100毫秒后重复滚动
}