是否可以使用烧瓶模板在网格/表格中显示产品？

Question

尝试使用 Flask 模板在网格中显示产品信息（产品名称、产品图片、产品价格）。有 10 个产品，我试图显示 5 个产品 x 2 行。

我试图让产品信息像此参考中的图像一样显示： https://schier.co/blog/2014/12/05/html-templating-output-a-grid-in-a-single-loop.html

但是每当我使用

时，什么都没有显示，所以我又回到了使用表格。

<table style="height: 200px;" width="200">
    <tbody>
        <tr>
        {% for x in result %}
            <td style="width: 190px;">
                <a href="/get_asin/{{ x['asin'] }}" target=_blank><img src = {{ x['product_image'] }}></a>
                <a href="/get_asin/{{ x['asin'] }}" " target=_blank>{{ x['product_name'] }}</a><br>
                <a href="/get_asin/{{ x['asin'] }}" " target=_blank>{{ x['TLC'] }}</a>
                <br>
            </td>
        {% endfor %}
        </tr>
    </tbody>
</table>

我尝试过 SO 的其他答案，但这些项目要么显示在一行或一列中，要么显示在网格中。

编辑： 这是我希望得到的：

<table>
<tbody>
<tr>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 1 name</p>
<p>product 1 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 2 name</p>
<p>product 2 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 3 name</p>
<p>product 3 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 4 name</p>
<p>product 4 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 5 name</p>
<p>product 5 price</p>
</td>
</tr>
<tr>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 6 name</p>
<p>product 6 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 7 name</p>
<p>product 7 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 8 name</p>
<p>product 8 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 9 name</p>
<p>product 9 price</p>
</td>
<td>
<p><img src="http://example.com/some_image_file.jpg" /></p>
<p>product 10 name</p>
<p>product 10 price</p>
</td>
</tr>
</tbody>
</table>

编辑： app.py 有以下几行：

result = list_matching(keyword)
return render_template('product_list_template.html', result=result)

“结果”变量是从另一个函数导入的产品信息列表字典，该函数从源解析信息。

[{'product_id': 'IP4D8', 'product_name': ... etc. ... 'price': '12.03'}, 
{'product_id': 'IP4D10', 'product_name': ... etc. ... 'price': '12.03'}]

【问题讨论】：

• 请写一个静态html表格的最小例子。
• @strippenzieher - 谢谢！我添加了一个我试图达到的例子。这需要一个循环吗？对不起，初学者。

Answer 1

我无法发表评论，所以我必须写下答案。但这取决于你得到的结果。如果您使用的是 flask-sqlalchemy，那么您必须获取模型对象。因此，如果您有“产品”模型，那么您的结果将是包含所有列的产品模型。 您可以通过以下方式访问它们：

{% for product in result %}
<p>{{ product.productname }}</p>
<img src='{{ product.imagename}}'> //ofcourse you have to give complete path before
{% endfor %}

Answer 2

因为您的整个 for 循环都在 <tr> 标记内，这导致将所有内容显示在一行中。
问题在于您的 html 代码。
将那些 <tr> 标签放在 for 循环中。

<table style="height: 200px;" width="200">
    <tbody>
        {% for x in result %}
         <tr> {## Here ##}
            <td style="width: 190px;"><a href="/get_asin/{{ x['asin'] }}" target=_blank><img src ="{{ x['product_image'] }}"></a></td>
                <td><a href="/get_asin/{{ x['asin'] }}" target=_blank>{{ x['product_name'] }}</a><br></td>
                <td><a href="/get_asin/{{ x['asin'] }}" target=_blank>{{ x['TLC'] }}</a><br></td>
         </tr> {## And Here ##}
        {% endfor %}
    </tbody>
</table>

我已根据您的评论编辑了答案。

编辑：我运行了以下代码，并将所有内容显示在格式良好的表格中尝试运行一次（您可能在 index.html 文件的 app.py 中存在一些错误，因为这种情况通常会发生）：
app.py：

from flask import Flask, render_template

app = Flask(__name__)

result = [{'a': 'a', 'b': 'b'}, {'a': 'aa', 'b': 'bb'}]

@app.route("/")
def index():
    return render_template("index.html", result=result)

app.run()

模板/index.html：

<table style="height: 200px;" width="200">
<tbody>
        {% for x in result %}
        <tr> {## Here ##}
                <td style="width: 190px;">{{ x["a"] }}<br></td>
                <td>{{ x["b"] }}<br></td>
        </tr> {## And Here ##}
        {% endfor %}
</tbody>
</table>

生成的 HTML 的来源：

<table style="height: 200px;" width="200">
<tbody>

    <tr> 
        <td style="width: 190px;">a<br></td>
        <td>b<br></td>
    </tr> 

    <tr> 
        <td style="width: 190px;">aa<br></td>
        <td>bb<br></td>
    </tr> 

</tbody>
</table>