时间戳

首页 > 解决方案 > 使用jinja2在表格中多行

html - 使用jinja2在表格中多行

问题描述

我想使用 jinja2 模板为学生及其成绩创建一个表格。 餐桌设计

 
<table>
<tr>
<the>Student Name</th>
<the>Course</th>
<the>Grad</th>
<tr class="">
   {% for student in students %}
   <td rowspan="3">
    student.name
   </td>
<td>student.course</td>
  <td>student.grd</td>
{% endfor %}
</tr>
</table>

标签： htmljinja2flask-sqlalchemy

解决方案

简要说明

  1. 将变量括在双括号（{{和}}）内；

  2. 该标签the实际上th是 html 标准（另外，结束标签必须与开始标签相同）；

  3. 重构您的数据结构：例如，课程可以是学生对象/字典中的对象数组或字典，因此可以对其进行迭代；

  4. html 属性需要是课程的rowspan大小，因为它决定了要跨越多少行；

  5. 对于这种情况，该rowspan属性必须td在每一行的每个表数据 ( ) 上声明一次，正如您已经注意到的那样，该属性位于学生的姓名上。

代码

如果您使用的是标准实例类对象而不是字典，则必须将方括号 ([和]) 访问器更改为点 ( ) 运算符。.

<table>
    <tr>
        <th>Student Name</th>
        <th>Course</th>
        <th>Grade</th>
    </tr>
    
    {% for student in students %}
    <tr>
        <td rowspan="{{student['courses']|length)}}">{{student['name']}}</td>
        <td>{{student['courses'][0]['name']}}</td>
        <td>{{student['courses'][0]['grd']}}</td>
    </tr>
        {% for course in student['courses'][1:] %}
        <tr>
            <td>{{course['name']}}</td>
            <td>{{course['grd']}}</td>
        </tr>
        {% endfor %}
    {% endfor %}
</table>

您可以在jinja2online 之类的网站上进行在线测试。

Jinja2 渲染输出示例

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
<table>
    <tr>
        <th>Student Name</th>
        <th>Course</th>
        <th>Grade</th>
    </tr>
    <tr>
        <td rowspan="2">Anonymous</td>
        <td>CS</td>
        <td>90</td>
    </tr>
      <tr>
          <td>NC</td>
          <td>60</td>
      </tr>
    <tr>
        <td rowspan="2">Elephant</td>
        <td>MATH</td>
        <td>100</td>
    </tr>
    <tr>
        <td>APPLIED MATH</td>
        <td>90</td>
    </tr>
</table>

测试用数据样本

{
    "students": [
        {
            "name": "Anonymous",
            "courses": [
                {
                    "grd": "90",
                    "name": "CS"
                },
                {
                    "grd": "60",
                    "name": "NC"
                }
            ]
        },{
            "name": "Elephant",
            "courses": [
                {
                    "grd": "100",
                    "name": "MATH"
                },
                {
                    "grd": "90",
                    "name": "APPLIED MATH"
                }
            ]
        }
    ]
}

从技术上讲，Python 中的字典是一个对象，但出于解释的目的，我区分了它们。

阅读推荐

推荐阅读