动态生成可变行数的HTML表格（Flask后端驱动）

本文介绍如何在flask应用中自动根据数据库查询结果动态渲染html表格，无需手动编写每一行代码，支持任意数量的记录（如50行、500行），兼顾简洁性与可维护性。

在Web开发中，将数据库查询结果以表格形式展示是常见需求。面对50行甚至上千行数据，若采用硬编码

✅ 核心实现三步法

1. 后端查询并传递数据：在路由函数中连接数据库（推荐使用 SQLAlchemy 或原生 sqlite3/psycopg2），执行查询，将结果（如列表字典 list[dict]）作为上下文变量传入模板；
2. 前端模板循环渲染：在 .html 文件中使用 {% for row in rows %} 遍历数据，并用 {{ row.field }} 插入字段值；
3. 结构语义化与样式增强：合理使用 / 区分表头与内容，配合 CSS 实现响应式边框、内边距与字体加粗。

   以下为完整可运行示例：

   app.py（Flask 后端）

   from flask import Flask, render_template
   
   app = Flask(__name__)
   
   # 示例：模拟从数据库获取的50条用户数据（实际项目中请替换为真实查询）
   def get_users_from_db():
       # 此处应为：db.session.execute("SELECT id, name, age FROM users").fetchall()
       return [
           {'id': i, 'name': f'User_{i}', 'age': 20 + (i % 40)}
           for i in range(1, 51)  # 生成50行
       ]
   
   @app.route('/')
   def show_table():
       users = get_users_from_db()
       return render_template('table.html', rows=users)
   
   if __name__ == '__main__':
       app.run(debug=True)

   templates/table.html（Jinja2 模板）

   

   VanceAI Image Resizer

   VanceAI推出的在线图片尺寸调整工具

   下载

   立即学习“前端免费学习笔记（深入）”；

   
   
   
       
       
       
   
   
       
   用户数据表（共 {{ rows|length }} 条记录）
       
               {% for user in rows %}
               
               {% else %}
               
               {% endfor %}
           
   
           
   
               
   
                   
   ID
                   
   姓名
                   
   年龄
               
           
           
   
                   
   {{ user.id }}
                   
   {{ user.name }}
                   
   {{ user.age }}
               
   暂无数据
       
   
   

   ⚠️ 注意事项与最佳实践

   • 安全过滤：Jinja2 默认对 {{ }} 中的内容进行 HTML 转义，防止 XSS 攻击；若需渲染富文本，请显式使用 |safe 过滤器（仅限可信内容）；
   • 空数据兜底：利用 {% else %} 子句处理空列表场景，提升用户体验；
   • 性能优化：对于超大数据集（如 >10,000 行），建议启用分页（Flask-SQLAlchemy 的 paginate()）或前端虚拟滚动，避免页面卡顿；
   • 字段一致性：确保数据库查询返回的字段名与模板中 row.xxx 的键名严格一致，推荐使用 namedtuple 或 ORM 模型对象提升可读性与类型安全。

   通过以上方式，你只需关注数据获取逻辑与模板结构，彻底告别“手写50个

   ”的重复劳动——这才是现代 Python Web 开发应有的效率与优雅。