Color coding cells in a table based on the cell value using Jinja templates
The easiest way would be to put this display logic in your template:
<table>
{% for row in data %}
<tr>
{% for item in row %}
{% if item <= 10 %}
<td class="under-limit">{{ item }}</td>
{% else %}
<td>{{ item }}</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</table>
Then, in your CSS you can use:
.under-limit { background-color: red; }
Colored text in Jinja2 template depending on condition in Python
You can use a condition to set a class on the table cell.
<td class="{{'red' if value[2] == True else 'green'}}">Text</td>
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
How can you change the color of a jinja2 entry depending on some condition? (using flask)
First of all, you should add a rule to your CSS so that you can change the color by applying a class to your element. Something like this:
.apples {
color: red;
}
Then, you need to make your Jinja template apply a class attribute depending on the value of entry.text:
<ul class="entries">
{% for entry in entries %}
<li {% if entry.text == 'apples' %} class="apples" {% endif %}>
<h2>{{ entry.title }}</h2>
{{ entry.text|safe }}
</li>
{% else %}
<li>
<em>Unbelievable. No entries here so far.</em>
</li>
{% endfor %}
</ul>
This technique is described in the Jinja manual for example under the topic “Highlighting Active Menu Items”.
Horizontally merge and divide cells in an HTML Table for Timetable based on the Data in Python File
I am not much familiar with Jinja, so this answer might not be the most efficient one.
By using basic hard coding in your Template.HTML file, I was able to achieve the results you are trying to. For this, I used the same code that was given by D-E-N in your previous question.
I combined all the attributes of your object into a string
- An attribute is differentiated from another with
@(like Course and Teacher) - Instead of using
space character, I used a_character to representspace characterin the attributes. - If one slot contains multiple objects, they are differentiated with
space character(just like in the code provided byD-E-N)
Here's the updated code of yours with these changes,
from typing import List
import pdfkit
from pdfkit.api import configuration
from jinja2 import FileSystemLoader, Environment
wkhtml_path = pdfkit.configuration(wkhtmltopdf = "C:\\Program Files\\wkhtmltopdf\\bin\\wkhtmltopdf.exe") #by using configuration you can add path value.
class section:
def __init__(self, id, course, section, instructor, room):
self.id = id
self.course = course
self.section = section
self.instructor = instructor
self.room = room
def generate_data():
data = {}
# For CS-1A
data["CS-1A"] = [["" for i in range(5)] for j in range(5)]
data["CS-1A"][0][0] += "Advance_Programming@Mr.Ashas@Room_#2 "
data["CS-1A"][0][0] += "Applied_Physics@Bilal@Room_#1 "
data["CS-1A"][0][1] += "Programming_Fundamentals@Muhammad_Bilal@Room_#1 "
data["CS-1A"][0][3] += "Programming_Fundamentals_Lab@Mr._Abid@Lab_#01 "
data["CS-1A"][0][4] += "Programming_Fundamentals_Lab@Mr._Abid@Lab_#01 "
# You may change all these for testing purposes.
# data["CS-1A"][0][0].append(section(2, "Programming Fundamentals", "CS-1A", "Bilal", "Room #1"))
# data["CS-1A"][0][1].append(section(3, "Applied Physics", "CS-1A", "Muhammad Bilal", "Room #5"))
# obj = section(4, "Programming Lab", "CS-1A", "Mr. Abid", "Lab #01")
# data["CS-1A"][0][1].append(obj)
# data["CS-1A"][0][2].append(obj)
# data["CS-1A"][0][4].append(section(5, "English Communication", "CS-1A1", "Ms. Ayeza", "Cal Lab"))
# data["CS-1A"][0][4].append(section(6, "English Communication", "CS-1A2", "Ms. Ayesha", "GP Lab"))
# data["CS-1A"][1][1].append(section(7, "Linear Algebra", "CS-1A", "Ms. Zain", "Romm #2"))
# obj = section(8, "English Lab", "CS-1A", "Ms. Abida", "Lab #04")
# data["CS-1A"][1][3].append(obj)
# data["CS-1A"][1][4].append(obj)
# data["CS-1A"][2][0].append(section(9, "Social Studies", "CS-1A", "Mr. Zain Iqbal", "Room #14"))
# data["CS-1A"][2][4].append(section(10, "Programming Fundamentals", "CS-1A", "Bilal", "Room #15"))
# # No lectures on Thursday i.e. 3rd index
# obj = section(11, "English Lab", "CS-1A", "Ms. Abida", "Lab #03")
# data["CS-1A"][4][1].append(obj)
# data["CS-1A"][4][2].append(obj)
# data["CS-1A"][4][2].append(section(12, "English Communication", "CS-1A1", "Ms. Ayeza", "Room #3"))
# data["CS-1A"][4][2].append(section(13, "English Communication", "CS-1A2", "Ms. Ayesha", "GP Lab"))
#
#
#
# # For CS-1B
# data["CS-1B"] = [[[] for i in range(5)] for j in range(5)]
#
# data["CS-1B"][0][1].append(section(14, "Advance Programming", "CS-1B", "Mr. Ali Hassan", "Room #2"))
# data["CS-1B"][0][2].append(section(15, "English Comprehension and Communication", "CS-1B", "Mr. Bilal", "Room #1"))
# obj = section(15, "Software for Mobile and Devices", "CS-1B", "Mr. Jacob", "Room #5")
# data["CS-1B"][1][1].append(obj)
# data["CS-1B"][1][2].append(obj)
# data["CS-1B"][1][3].append(section(17, "Calculus and Geometrical Analytics", "CS-1B", "Ms. Nomi Khan", "Room #06"))
# data["CS-1B"][2][3].append(section(18, "Introduction to Information and Communication Technology - Lab", "CS-1B1", "Ms. Sarah Niaz", "Lab #01"))
# data["CS-1B"][2][3].append(section(19, "Introduction to Information and Communication Technology - Lab", "CS-1B2", "Ms. Julia John", "Lab #06"))
# data["CS-1B"][2][4].append(section(20, "English Comprehenseion and Communication", "Cs-1B", "Mr. Lionel Boyle", "Room #02"))
# data["CS-1B"][3][3].append(section(21, "Programming Fundamentals", "CS-1B", "Mr. Alex Niles", "Room #3"))
# data["CS-1B"][4][2].append(section(22, "Linear Algebra", "CS-1B", "Ms. Ayesha", "GP Lab"))
return data
def organise_input_data(elements: List[List[str]]) -> List[list]:
"""
Organises the input data to find double courses for easier use in templates
"""
new_elements = []
for day in elements:
last_course = None
course_list = []
index = 0
for course in day:
# cleanup data
course = course.strip().replace(" ", "<hr>")
# check if long course (and not lunch time)
if course != "" and course == last_course and index != 3:
course_list.remove((course, 1))
course_list.append((course, 2))
course_list.append(("none", 0))
else:
course_list.append((course.replace(" ", "<hr>"), 1))
last_course = course
index += 1
new_elements.append(course_list)
return new_elements
def generate_html(template, name: str, elements: List[list]) -> str:
new_elements = organise_input_data(elements=elements)
rendered = template.render(
name=name,
monday=new_elements[0],
tuesday=new_elements[1],
wednesday=new_elements[2],
thursday=new_elements[3],
friday=new_elements[4]
)
with open(f"out_{name}.html", "w+") as file:
file.write(rendered)
return rendered
def run(input_data):
# Init jinja
file_loader = FileSystemLoader('.')
env = Environment(loader=file_loader)
template = env.get_template('template.html')
full_text = ""
for name, elements in input_data.items():
full_text += generate_html(template=template, name=name, elements=elements)
pdfkit.from_string(full_text, "out.pdf", configuration = wkhtml_path)
if __name__ == '__main__':
data = generate_data()
run(data)
Major changes are done in the template.html file to achieve what you are trying to achieve. Here's the Code,
<!DOCTYPE html>
<html>
<style>
.center
{
text-align: center;
}
.left
{
text-align: left;
margin-left: 6px;
/*margin-top: 10px;*/
}
.right
{
text-align: right; margin-right: 4px;
}
.teacher
{
margin-left: 4px;
}
td{
height:175px;
width:150px;
}
</style>
<body>
<!-- Heading -->
<h1 class="center">{{name}}</h1>
<!-- Table -->
<table border="5" cellspacing="5" align="center">
<!-- Day/Periods -->
<tr>
<td class="center" ><br>
<b>Day/Period</b></br>
</td>
<td class="center" >
<b>I</b>
</td>
<td class="center" >
<b>II</b>
</td>
<td class="center">
<b>III</b>
</td>
<td class="center">
<b>1:15-1:45</b>
</td>
<td class="center" >
<b>IV</b>
</td>
<td class="center" >
<b>V</b>
</td>
</tr>
<!-- Monday -->
<tr>
<td class="center">
<b>Monday</b></td>
{% for course in monday %}
{% if loop.index == 4 %}
<td rowspan="6" class="center">
<h2>L<br>U<br>N<br>C<br>H</h2>
</td>
{% endif %}
{% if course[1] != 0 %}
<td colspan={{course[1]}}>
{% set count = [] %}
{%- for y in range(0, 5) -%}
{%- if count|length < course[0]|length -%}
<p class="left">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "right">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "teacher">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
<!-- <p class="left">{{course[0]}}</p>
<p class="right">{{course[1]}}</p>
<p class="teacher">{{course[2]}}</p> -->
{%- endif -%}
{%- endfor -%}
</td>
{% endif %}
{% endfor %}
</tr>
<!-- Tuesday -->
<tr>
<td class="center">
<b>Tuesday</b>
</td>
{% for course in tuesday %}
{% if course[1] != 0 %}
<td colspan={{course[1]}}>
{% set count = [] %}
{%- for y in range(0, 5) -%}
{%- if count|length < course[0]|length -%}
<p class="left">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "right">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "teacher">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
<!-- <p class="left">{{course[0]}}</p>
<p class="right">{{course[1]}}</p>
<p class="teacher">{{course[2]}}</p> -->
{%- endif -%}
{%- endfor -%}
</td>
{% endif %}
{% endfor %}
</tr>
<!-- Wednesday -->
<tr>
<td class="center">
<b>Wednesday</b>
</td>
{% for course in wednesday %}
{% if course[1] != 0 %}
<td colspan={{course[1]}}>
{% set count = [] %}
{%- for y in range(0, 5) -%}
{%- if count|length < course[0]|length -%}
<p class="left">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "right">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "teacher">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
<!-- <p class="left">{{course[0]}}</p>
<p class="right">{{course[1]}}</p>
<p class="teacher">{{course[2]}}</p> -->
{%- endif -%}
{%- endfor -%}
</td>
{% endif %}
{% endfor %}
</tr>
<!-- Thursday -->
<tr>
<td class="center">
<b>Thursday</b>
</td>
{% for course in thursday %}
{% if course[1] != 0 %}
<td colspan={{course[1]}}>
{% set count = [] %}
{%- for y in range(0, 5) -%}
{%- if count|length < course[0]|length -%}
<p class="left">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "right">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "teacher">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
<!-- <p class="left">{{course[0]}}</p>
<p class="right">{{course[1]}}</p>
<p class="teacher">{{course[2]}}</p> -->
{%- endif -%}
{%- endfor -%}
</td>
{% endif %}
{% endfor %}
</tr>
<!-- Friday -->
<tr>
<td class="center">
<b>Friday</b>
</td>
{% for course in friday %}
{% if course[1] != 0 %}
<td colspan={{course[1]}}>
{% set count = [] %}
{%- for y in range(0, 5) -%}
{%- if count|length < course[0]|length -%}
<p class="left">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "right">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "teacher">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
<!-- <p class="left">{{course[0]}}</p>
<p class="right">{{course[1]}}</p>
<p class="teacher">{{course[2]}}</p> -->
{%- endif -%}
{%- endfor -%}
</td>
{% endif %}
{% endfor %}
</tr>
</table>
</body>
</html>
This produces the following result,
Change color is table cell based of columns in database
Try:
In views.py:
@app.route('/our_ips')
def our_ips():
# whatever query format you use
our_ip_addresses = db.session.execute("select ipaddress from Gear")
# you want something like:
# our_ip_addresses = ['2.0.0.10', '2.0.0.50', '2.0.0.100']
return render_template("our_ips.html", our_ips=our_ip_addresses)
Then, in our_ips.html:
<table>
{% for n in range(1, 255) %}
<tr>
{% if ("2.0.0." + n|string) in our_ips %}
<td class="greenText">
2.0.0.{{n}}
</td>
{% else %}
<td>
2.0.0.{{n}}
</td>
{% endif %}
</tr>
{% endfor %}
</table>
Can I make a number in a table cell have a different color based on its value using JavaScript/AngularJS
Instead of jQuery, you can achieve this by ng-class.
<td><span ng-class="p.price > 1.5 ? 'price-red' : ''">{{p.price}}</span></td>
CSS
.price-red {
// apply your code like
color: red;
}
Related Topics
Convert Column to Date Format (Pandas Dataframe)
Django: Deploying an Application on Heroku with SQLite3 as the Database
How to Serve Multiple Clients Using Just Flask App.Run() as Standalone
How to Customise Qgroupbox Title in Pyqt5
How to Decrypt Aws Ruby Client-Side Encryption in Python
How to Import a Python Class That Is in a Directory Above
Expand Python Search Path to Other Source
How to Apply a Disc Shaped Mask to a Numpy Array
Why Doesn't This Division Work in Python
Remove Characters Except Digits from String Using Python
Displaying Subprocess Output to Stdout and Redirecting It
How to Create Nested Dict in Python
Using Beautiful Soup to Convert CSS Attributes to Individual HTML Attributes
Closest Equivalent of a Factor Variable in Python Pandas
Equivalent to Python's Findall() Method in Ruby
How to Add Title to Subplots in Matplotlib
Python 3.7 Anaconda Environment - Import _Ssl Dll Load Fail Error