I have a table in html which gets the data from a SQL query in PY. One of the columns in my SQL table is type (tp). I want the html table to show one color for each row of the same type and another for opposite. It´s a financial diary so when you input expenses SQL save that info. I want the table to show the history and expenses rows in red and incomes rows in green. Here it´s my PY and HTML code. Please help I´m lost
#app.route("/history")
#login_required
def history():
"""Show history of inputs"""
inputs = db.execute("""
SELECT amount, category, tp, transacted
FROM inputs
WHERE user_id = :user_id
ORDER BY transacted ASC
""", user_id=session["user_id"])
return render_template("history.html", inputs=inputs)
{% extends "layout.html" %}
{% block title %}
History
{% endblock %}
{% block main %}
<table class="table table-striped">
<thead>
<tr>
<th>Type</th>
<th>Amount</th>
<th>Category</th>
<th>Transacted</th>
</tr>
</thead>
<tbody>
{% for input in inputs %}
<tr>
<td>{{input["tp"]}}</td>
<td>{{input["amount"]}}</td>
<td>{{input["category"]}}</td>
<td>{{input["transacted"]}}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
Can you check whether below code will work.
Define "red" and "green" css classes in your css file.
<tbody>
{% for input in inputs %}
<tr>
{% if input["tp"] == 'expense' %}
<td class="red">{{input["tp"]}}</td>
<td class="red">{{input["amount"]}}</td>
<td class="red">{{input["category"]}}</td>
<td class="red">{{input["transacted"]}}</td>
{% else %}
<td class="green">{{input["tp"]}}</td>
<td class="green">{{input["amount"]}}</td>
<td class="green">{{input["category"]}}</td>
<td class="green">{{input["transacted"]}}</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
Related
What I am trying to do is to populate a html table with the same numbers of rows as entries in my dictionary.
I am passing my dictionary items as a context variable to the html.
I can show my dictionary items as follows:
{% for key,value in top_items.items %}
<ul>{{ key }}</ul>
{% endfor %}
But when I try an stick it into a table to create table rows, like below, it does not work. It seems to put them all in one row. Instead of making a new row for each item.
<table class="u-half-width">
<thead>
<tr>
<th>Column</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
{% for key,value in top_items.items %}
<tr>{{ key }}</tr>
{% endfor %}
</tr>
</tbody>
</table>
Your HTML is invalid; you can't nest a <tr> inside another <tr>, and you don't have any <td>/<th> elements.
Try:
<tbody>
{% for key,value in top_items.items %}
<tr>
<th scope="row">{{ key }}</th>
<td>{{ value }}</td>
</tr>
{% endfor %}
</tbody>
I'm trying to display me df in a table to my web app (without using .tohtml because I need a dynamic table).
It seems that I can't use the key/column variable from my loop :
<table id='bdd_table'>
<thead>
<tr>
{% for header in BDD_Data %}
<th> {{header}} </th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for key in BDD_Data_size %}
<tr>
{% for column in BDD_Data %}
<td> {{BDD_Data[column][key]}} </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
My error:
I think I've any problems with my data because if I write {{column}} / {{key}} instead of {{BDD_Data[column][key]}} it displays all the values from my dataframe.
The trick was to use mydataframe.values :
<table id='bdd_table'>
<thead>
<tr>
{% for header in BDD_Data %}
<th> {{header}} </th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for value in BDD_Data.values %}
<tr>
{% for cell in value %}
<td> {{cell}} </td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
I have a for loop within my Django project, what I'am trying to do is the following :
If
morning_recess == True
lunch_recess == True
afternoon_recess == True
then the bootstrap tag in that field should be
<td><span class="badge badge-success">Success</span></td>
else
<td> None </td>
Here is my current code:
<table style="width:100%">
<tr>
<th>Student Name</th>
<th>Morning Recess</th>
<th>Lunch Recess</th>
<th>Afternoon Recess</th>
<th>Earned At</th>
</tr>
<tr>
{% for i in students_recess_today %}
{% if i.morning_recess == True %}
<td>{{i.student_ps }}</td>
<td><span class="badge badge-success">Success</span></td>
<td>{{i.lunch_recess}}</td>
<td>{{i.afternoon_recess}}</td>
<td>{{i.created_at}}</td>
{% else %}
<td>{{i.student_ps }}</td>
<td>None</td>
<td>{{i.lunch_recess}}</td>
<td>{{i.afternoon_recess}}</td>
<td>{{i.created_at}}</td>
{% endif %}
</tr>
{% endfor %}
</table>
</div>
The morning_recess works fine, however if i do another if statement after the following one, the order of my table gets all messed up. How do I write this correctly? Thank you
It's not clear what "in that field" means, because in your example you have one extra column before the morning_recess column. But you can put {% if %} statements anywhere you want in the template, e.g.:
<td>
{% if i.morning_recess %}
<span class="badge badge-success">Success</span>
{% else %}
<span>None</span>
{% endif %}
</td>
<td>
{% if i.lunch_recess %}
<span class="badge badge-success">Success</span>
{% else %}
<span>None</span>
{% endif %}
</td>
<td>
{% if i.afternoon_recess %}
<span class="badge badge-success">Success</span>
{% else %}
<span>None</span>
{% endif %}
</td>
...
Also as other commenters suggest, your for loop should probably wrap the rows of your table (<tr>...</tr>), not the columns (<td>).
You have the loop partially inside your tr element. It starts a row at the beginning and for every student adds the columns and ends a row, so it ends up looking like <tr></tr></tr></tr>.
You should move your for statement outside of the row, like so:
...
{% for i in students_recess_today %}
<tr>
...
</tr>
{% endfor %}
</table>
</div>
I want to use the template to create all the tables of my project, but after writing is appearing errors like this:
jinja2.exceptions.TemplateSyntaxError: expected token ':', got '}'
{{ table(headers={{headers}},items={{item}},url='None') }}
I've looked at the jinja2 website but couldn't find the answer to the syntax error.
# python
#app.route('/products')
def products():
context = {}
qproducts = list(s.query(Product))
context['products'] = qproducts
return render_template('products.html', **context)
# table.html
{% macro table(headers,items,url,var) -%}
<table class='table table-sm table-dark'>
<thead>
<tr>
{{headers}}
</tr>
</thead>
<tbody>
{% for item in items %}
<tr onclick="window.location='{{url}}'">
{{items}}
</tr>
{% endfor %}
</tbody>
</table>
{%- endmacro %}
# products.html
{% from 'table.html' import table %}
{% block headers %}
<th>ID</th>
<th>Price</th>
{%endblock headers%}
{%block item%}
{%for item in products%}
<td>{{item.id}}<td><br>
<td>{{item.price}}<td><br>
{%endfor%}
{%endblock item%}
{{ table(headers={{headers}},items={{item}},url='None') }}
Even when you fix the references to variables (i. e. remove surrounding {{/}}) it won't work the way you expect. block tag can only be used with extends tag, but you use import for macros importing. If you want to write universal macro for table rendering it's better to use combination of macro/call tags:
{% macro table(headers,items,url,var) -%}
<table class='table table-sm table-dark'>
<thead>
<tr>
{{ caller(mode='header') }}
</tr>
</thead>
<tbody>
{% for item in items %}
<tr onclick="window.location='{{url}}'">
{{ caller(mode='row', item) }}
</tr>
{% endfor %}
</tbody>
</table>
{%- endmacro %}
caller here is a reference to a special function which invokes externally-provided callback. Then you can call this macro this way:
{% call(mode, items) table(headers=headers, items=item, url='None') %}
{% if mode='header' %}
<th>ID</th>
<th>Price</th>
{% else %}
{%for item in products%}
<td>{{item.id}}<td><br>
<td>{{item.price}}<td><br>
{% endfor %}
{% endif %}
{% endcall %}
Every mention of caller in macro table invokes body of the caller tag with the specified parameters. So, you can customize the behavior of the macro.
I'm creating an e-commerce website and I wanted to build a page where I could view a list of all the orders created.
If the order contains just 1 type of item, the format works correctly, but i can't think of a way to construct the table when there are multiple types of items ordered.
This is how it looks like when there are 2 items ordered (last entry):
I want the "Queso Burrito" to be right under "steak and egg burrito" for #18.
This is my code:
<table>
<tr>
<td>#</td>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Order</td>
<td>Order Quantity</td>
<td>Delivered</td>
</tr>
{% for ord in orders %}
<tr>
<td>{{ord.pk}}</td>
<td>{{ord.user.first_name}}</td>
<td>{{ord.user.email}}</td>
<td>{{ord.user.get_profile.phone}}</td>
{% for food in ord.orderitem_set.all %}
<td>{{food.name}}</td>
<td>{{food.quantity}}</td>
{% endfor %}
<td>x</td>
</tr>
{% endfor %}
</table>
With multiple items, you typically see tables with order data repeated for each line item.
{% for order in orders %}
{% for orderitem in order.items %}
<td>{{order.id}}</td><td>...</td>
{% endfor %}
{% endfor %}
If you want exactly the formatting you described, you could check if the inner loop is past its first item and hide the fields you don't want repeated.
<table>
{% for ord in orders %}
{% for item in ord.orderitem_set.all %}
<tr>
{% if forloop.counter == 1 %}
<td>{{ord.pk}}</td>
<td>{{ord.user.first_name}}</td>
<td>{{ord.user.email}}</td>
<td>{{ord.user.get_profile.phone}}</td>
{% else %}
<td colspan="4"></td>
{% endif %}
<td>{{item.name}}</td>
<td>{{item.quantity}}</td>
<td>{% if forloop.counter == 1 %}x{% endif %}</td>
</tr>
{% endfor %}
{% endfor %}
</table>