我在使用数组填充表格行时遇到了一些麻烦。
我想要实现的目标:
标题行和第一列工作正常,但我没有得到正确的数字,第一行只包含数组的第一个数字(即50),第二行只包含数组中的第二个数字等
我的代码:
---
exercises: [Burpees, Squats, Pull ups, Push ups]
rounds: 5
reps: [50, 40, 30, 20, 10]
---
<table class="responsive-table">
<thead>
<tr>
<th scope="col">Round</th>
{% if page.exercises %}
{% for exercise in page.exercises %}
<th scope="col">{{ exercise }}</th>
{% endfor %}
{% endif %}
</tr>
</thead>
<tbody>
{% for n in (1..{{page.rounds}}) %}
<tr>
<th scope="row">Round {{ n }}</th>
<!-- THIS PART DOESNT WORK
{% for exercise in page.exercises %}
<td data-title="{{ exercise }}"> {{ page.reps }} </td>
{% endfor %}
-->
</tr>
{% endfor %}
</tbody>
</table>
如何按照图片中的方式填充单元格?
答案 0 :(得分:4)
exercises: [Burpees, Squats, Pull ups, Push ups]
reps: [50, 40, 30, 20, 10]
---
<table class="responsive-table table">
<thead>
<tr>
<th scope="col">Round</th>
{% for exercise in page.exercises %}
<th scope="col">{{ exercise }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% assign total = 0 %}
{% for rep in page.reps %}
{% assign total = total | plus: rep %}
<tr>
<th scope="row">Round {{ forloop.index }}</th>
{% for exercise in page.exercises %}
<td data-title="{{ exercise }}"> {{ rep }} </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th scope="row">Sum</th>
{% for exercise in page.exercises %}
<td>{{ total }}</td>
{% endfor %}
</tr>
</tfoot>
</table>