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

本文介绍如何在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 模板）