如何实现Flask渲染的HTML表格行逐行延迟显示？

步骤1：修改Jinja2模板代码 #

给表格的数据行添加统一类名和索引标识，同时初始隐藏行：

<table class="styled-table">
    <tr>
    {% for header in headings %}
        <th>{{ header }}</th>
    {% endfor %}
    </tr>
    {% for idx, row in enumerate(data_listed) %}
        <tr class="table-row" data-index="{{ idx }}" style="display: none;">
        {% for cell in row %}
            <td>{{ cell }}</td>
        {% endfor %}
        </tr>
    {% endfor %}
</table>

步骤2：添加JavaScript控制延迟显示 #

在页面底部（或在<head>中给<script>加defer属性）插入以下代码，控制每行按顺序延迟显示：

document.addEventListener('DOMContentLoaded', function() {
    const rows = document.querySelectorAll('.table-row');
    // 自定义每行延迟间隔（毫秒），这里设为300ms
    const rowDelay = 300;

    rows.forEach((row, index) => {
        setTimeout(() => {
            row.style.display = 'table-row';
            // 可选：添加淡入动画让显示更自然
            row.style.opacity = '0';
            row.style.transition = 'opacity 0.3s';
            setTimeout(() => row.style.opacity = '1', 10);
        }, index * rowDelay);
    });
});

可选：用CSS分离样式（更规范） #

如果不想用内联样式，可把隐藏和动画逻辑写到CSS中：

.table-row {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.table-row.show {
    display: table-row;
    opacity: 1;
}

对应的JavaScript代码修改为添加类名触发显示：

document.addEventListener('DOMContentLoaded', function() {
    const rows = document.querySelectorAll('.table-row');
    const rowDelay = 300;

    rows.forEach((row, index) => {
        setTimeout(() => row.classList.add('show'), index * rowDelay);
    });
});

原理说明 #

Flask后端会一次性渲染所有表格行，通过初始隐藏+前端JS延迟触发显示的方式，实现视觉上的逐行加载效果。延迟间隔可根据需求调整，动画效果能避免显示过于生硬。

内容的提问来源于stack exchange，提问作者fizzy