Good day All
I am trying to make an HTML Table in the Print Format, but the rows of the table would be in reverse order.
Sample Image of the Final Goal:
In addition, this is the code I wrote so far:
<table width=100% border="1">
{%- for row in doc.review_table -%}
<tr>
<td>{{loop.index}}</td>
<td>{{ row.issued_for }}</td>
<td>{{ row.prepared_by }}</td>
<td>{{ row.checked_by }}</td>
<td>{{ row.date }}</td>
</tr>
{% endfor %}
<tr>
<th>Rev. </th>
<th>Issued For</th>
<th>Prepared</th>
<th>Checked</th>
<th>Date</th>
</tr>
</table>
This is the result of my code:
Can anyone help me with this?
Thank you
bahaou
December 16, 2021, 1:17pm
3
you can just reverse the doc.review_table using {%- for row in doc.review_table|reverse -%}
Thank you @bahaou
Your code worked, however, the {{loop.index}} remained as is, the numbers didn’t reverse with the rest of the data.
Before:
After:
#1 became
#3 and
#3 became
#1
bahaou
December 16, 2021, 1:36pm
5
you can ignore the loop.index and create an index of your own .
before the loop assign a variable with the length of the items . on each row you can show it and then change it minus 1 .
example :
{% set i=[doc.review_table | length]%}
{%- for row in doc.review_table -%}
tr
<td {{i[0]}} /td
{% if i.append(i.pop()-1) -%}{% endif %}
<td {{ row.issued_for }} /td
<td {{ row.prepared_by }} /td
<td {{ row.checked_by }} /td
<td {{ row.date }} /td
/tr
…
1 Like
@bahaou
It worked.
Although, don’t forget to type the “|reverse” in the Jinja block:
{% set i=[doc.review_table | length]%}
{%- for row in doc.review_table|reverse -%}
tr
<td {{i[0]}} /td
{% if i.append(i.pop()-1) -%}{% endif %}
<td {{ row.issued_for }} /td
<td {{ row.prepared_by }} /td
<td {{ row.checked_by }} /td
<td {{ row.date }} /td
/tr
Thank you so much
bahaou
December 16, 2021, 1:58pm
8
I m gonna ask you a stupid question here
how to write html here ? cauz it’s reading my reply as pure html so I deleted the < in the tags
It’s simple.
First you paste the HTML code as is in the text editor, next, highlight the HTML code and press on the button icon ( </> )
Just like this: