用Flask构建一个带有动态元素的Bootstrap表格

Question

用Flask构建一个带有动态元素的Bootstrap表格

pythontwitter-bootstrapflasksqlalchemybootstrap-table

5

我正在使用Flask构建一个Bootstrap表格，这个表格是基于从SQLAlchemy数据库中取出的人员列表。然而，我想放入表格中的信息却出现在了表格上方。

以下是相关代码：

<!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 %}

这已经是一个精简版本了，因为我不断地删除内容来查看是否能解决问题。

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

信息都在那里，但是它们呈现在表格上方。而紧接着表头和空表行出现在下面。

链接

我在这里找到了关于使用Flask构建Bootstrap表格的另一个问题，但它并没有真正解决我的问题。我的数据被传递到html页面上，但我想把它放在一个表格里。

我还发现了一个扩展——Flask-Table，可以用Python构建表格，然后使用它。这可能会成为一个解决方案，但我仍然不知道我的代码有什么问题。

在Bootstrap文档中也没找到有用的东西。

任何帮助都将不胜感激！

- Lucas Murtinho

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Doobeh · Accepted Answer

你缺少了一些 <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>

您的目标是为每个用户创建一个表格行（<tr>），并为其每个属性创建一些表格数据（<td>）。您也有一个{% endblock %}，但应该使用{% endfor %}。