使用jinja模板在html中显示两个python列表作为网页中的两列

Question

我有两个Python列表：

list_1 = [1, 2, 3, 4, 5, 6, 7]
list_2 = ["A", "B", "C", "D", "E", "F", "G"]

我已经尝试过：

<div class="tableFixHead">
  <table id="data">
    <tr>{% for num in list_1 %}
      <td>{{num}}</td>
    </tr>
    <tr>{% for alp in list_2 %}
      <td>{{alp}}</td>
    </tr>
    {% endfor %}
</div>

通过这两个列表，我想使用 jinja 在网页中创建一个表格，如下所示：

使用单个列表时我可以做到这一点。但如何处理多个列表呢？

Answer 1

对于两次迭代，您只有一个

{% endfor %}

。 这看起来不对，还有

td

和

tr

元素看起来很混乱。我建议是像这样zip后端的列表：

data = zip(list_1, list_2)

然后在前端迭代这些元组对：

<div class="tableFixHead">
  <table id="data">
    {% for num, alp in data %}
    <tr>
      <td>{{ num }}</td>
      <td>{{ alp }}</td>
    </tr>
    {% endfor %}
  </table>
</div>

（您也可以在前端使用 zip 功能，例如通过 Jinja2 过滤器，当然。）

Answer 2

<div class="row">
    <div class="col">
        <table>
        {% for num in list1 %}
            <tr>
                <td>{{num}}</td>
            </tr>
        {% endfor %}
        </table>
    </div>
    <div class="col">
        <table>
            {% for alp in list2 %}
            <tr>
                <td>{{alp}}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
</div>

你也可以尝试这样的事情