使用 jinja2 在 table 中多行

Multi row in table by using jinja2

我想 table 使用 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>

简要说明

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

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

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

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

  5. rowspan 属性必须在这种情况的每一行上的每个 table 数据 (td) 声明一次，它位于学生，你已经注意到了。

代码

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

<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 中的字典是一个对象，但出于解释目的我区分了它们。

读书推荐