在 Flask 中使用动态元素构建 Bootstrap table

Question

我正在使用 Flask 从 SQLAlchemy 数据库中获取人员列表来构建 Bootstrap table。但是，我想放在 table 中的信息出现在它上面。

这是有问题的代码：

<!DOCTYPE html>

{% extends "base.html" %}

{% block page_content %}
<div class="page-header">
    <h1>componentes familiares</h1>
        <table class="table">
            <thead>
                <th>name</th>
                <th>age</th>
                <th>option</th>
            </thead>
            <tbody>
                {% for person in people %}
                    <tr>{{ person.name }}</tr>
                    <tr>{{ person.age }}</tr>
                    <tr>{{ person.option }}</tr>
                {% endblock %}
            </tbody>
        </table>
{% endblock %}

（这已经是 slimmed-down 版本了，因为我一直在拿东西看它是否能解决问题。）

但假设我的数据库中有两个人，Alice 和 Bob。 Alice 是 30，Bob 是 40，Alice 的选项是 1，Bob 的选项是 2。这就是我得到的：

信息在那里，但呈现在 table 之上。在它的正下方是 table header 和一个空的 table 行。

链接

我在 Flask here 中发现了另一个关于 Bootstrap tables 的问题，但它并没有真正解决我的问题。我的数据完全按照我的意愿传递到 html 页面，我只想将它放在 table.

中

我还发现 Flask-Table，一个在 Python 中构建 table 的扩展，然后使用它。它可能最终成为一个解决方案，但我仍然看不出我的代码有什么问题。

也没有在 Bootstrap docs 中找到任何有用的东西。

非常感谢任何帮助！

Answer 1

您缺少一些 <tr> 和 <td> 标签：

<table class="table">
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>option</th>
        <tr>
    </thead>
    <tbody>
        {% for person in people %}
        <tr>
            <td>{{ person.name }}</td>
            <td>{{ person.age }}</td>
            <td>{{ person.option }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

您的目标是每个用户 table 行 (<tr>)，以及他们每个属性的一些 table 数据 (<td>)。你还有一个 {% endblock %} ，你应该有一个 {% endfor %}.

在 Flask 中使用动态元素构建 Bootstrap table

Building a Bootstrap table with dynamic elements in Flask

python

sqlalchemy

flask

twitter-bootstrap

bootstrap-table