如何在烧瓶中的 table 数据中添加序列号?

How do I add serial number in table data in flask?

我有一个 table,我在其中通过 for 循环使用 Jinja 2 插入数据。现在我无法添加序列号。如果我为它添加第二个循环(它变成嵌套),它会复制 table 行。

这是我的代码:

<table class="table-auto w-full text-left whitespace-no-wrap">
          <thead>
            <tr>
              <th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl">Sr</th>
              <th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Semester</th>
              <th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">GPA</th>
             
            
            </tr>
          </thead>
          <tbody>

            {%for key, value in gpa_list.items()%}
            <tr>
              <td class="border-t-2 border-gray-200 px-4 py-3"># I want to add serial here</td>
              <td class="border-t-2 border-gray-200 px-4 py-3">{{key}}</td>
              <td class="border-t-2 border-gray-200 px-4 py-3">{{value}}</td>
            </tr>
            
            {% endfor %}
            
          </tbody>
        </table>

请先告诉我添加序列号的方法<td>

如果序列号是指从 1 开始自动生成的数字,则可以使用 jinja2 的魔法 {{loop.index}}。这通常在 Python 中通过使用内置的枚举函数来实现,但 jinja2 模板不只是 运行 嵌入 Python.

<table class="table-auto w-full text-left whitespace-no-wrap">
  <thead>
    <tr>
      <th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl">Sr</th>
      <th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Semester</th>
      <th class="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">GPA</th>

    </tr>
  </thead>
  <tbody>

    {%for key, value in gpa_list.items()%}
    <tr>
      <td class="border-t-2 border-gray-200 px-4 py-3">{{loop.index}}</td>
      <td class="border-t-2 border-gray-200 px-4 py-3">{{key}}</td>
      <td class="border-t-2 border-gray-200 px-4 py-3">{{value}}</td>
    </tr>
    
    {% endfor %}
    
  </tbody>
</table>