HTML Table - Iterate over multiple Lists and Create a Table - python

I have 3 lists of data that i would like to print out as a Table in HTML.
Lists
ipaddress [10.1.1.0,10.1.1.1,10.1.1.2,10.1.1.3]
State [Full,Full,Full,Full]
Interface [ge0,ge1,ge2,ge3]
ID [ 0,1,2,3]
I would like to Print above rows as a table under Table Column as rows.
Table Header
Address Interface State ID
I cant seem to figure out the proper for loops logic to print this as a table, here is what i have currently.
{%extends "home/layout.html"%}
{% block body%}
<h1 style="text-align:center;">Here is the Inventory </h1>
<li> {{ospfneighboraddress}}</li>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Address</th>
<th scope="col">Interface</th>
<th scope="col">State</th>
<th scope="col">ID</th>
</tr>
</thead>
<tbody>
{% for ospfaddress in ospfneighboraddress %}
<tr>
<td>{{ ospfaddress }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{%endblock%}
ospfneighboraddress is the first IP address list, rest are also lists
Here are other list names:
ospfneighborinterface
ospfneighborstate
ospfneighborID
How do print next three lists for each IP address ?

Here you go!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Address</th>
<th>Interface</th>
<th>State</th>
<th>ID</th>
</tr>
<tr>
<td>10.1.1.0</td>
<td>ge0</td>
<td>Full</td>
<td>0</td>
</tr>
<tr>
<td>10.1.1.1</td>
<td>ge1</td>
<td>Full</td>
<td>1</td>
</tr>
<tr>
<td>10.1.1.2</td>
<td>ge2</td>
<td>Full</td>
<td>2</td>
</tr>
<tr>
<td>10.1.1.3</td>
<td>ge3</td>
<td>Full</td>
<td>3</td>
</tr>
</table>
</body>
</html>

Related

How to pass values from a selected table row to my backend

In my index.html page I have a table row:
<tr role="row" class="odd" style="color: rgb(0, 0, 0);">
<td hidden="" class="sorting_1">6</td>
<td>example_name</td>
<td>example_phone</td>
<td>example_email</td>
</tr>
The table in index.html is rendered using bootstrap 4 and MDBootstrap.
after selecting the row in the browser, the <tr> class changes its state to tr-color-selected:
<tr role="row" class="odd tr-color-selected" style="color: rgb(0, 0, 0);">
<td hidden="" class="sorting_1">6</td>
<td>example_name</td>
<td>example_phone</td>
<td>example_email</td>
</tr>
how can I pass the values of example_name, example_phone, example_email from the selected table row to my controller views.py? I am using Flask and SQLAlchemy in my backend.
Edit #1 - server-side javascript code
I am using MDBootstrap Modal Editor (https://mdbootstrap.com/docs/b4/jquery/plugins/table-editor/)to render my datatable:
<script>
$('#persons_table').mdbEditor({
modalEditor: true,
headerLength: 6,
});
$('.dataTables_length').addClass('bs-select');
</script>
This is my code that generates the table:
<!-- table -->
<table id="persons_table" class="table table-sm table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th hidden class="th-sm">ID
</th>
<th class="th-sm">example_name
</th>
<th class="th-sm">example_phone
</th>
<th class="th-sm">example_email
</th>
</tr>
</thead>
<tbody>
{% for row in persons %}
<tr>
<td hidden>{{row.id}}</td>
<td>{{row.example_name}}</td>
<td>{{row.example_phone}}</td>
<td>{{row.example_email}}</td>
</tr>
{%- endfor %}
</tbody>
</table>
</div>
</div>

How to transfer data from tables to web forms?

I have a table that displays information through a list of dictionaries.
This is the program :
<div class = "col-md-8" >
<table class="table table-bordered table-striped table-hover">
<thead> <!-- En-tĂȘte du tableau -->
<tr>
<th> Host Name </th>
<th> Hardware </th>
<th> Fixed-Address </th>
<th> Comment </th>
<tr>
</thead>
<tbody> <!-- Corps du tableau -->
{% for item in items %}
<tr id="confirm">
{% for key in [ 'host','hardware','fixed_address','comment' ] %}
<td> {{ item[key].decode('utf-8') }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
What I would like to do is to be able to modify it or add a new entry, that's not what I am going to ask here because before that I need to do the following:
Basically, I need to make every row act as a link, when I click on it (the row) I should be redirected to a web page with web forms and those web forms will be filled with the data from the table cells.
How can I do it? Thanks beforehand.
Do something like this.
<thead> <!-- En-tĂȘte du tableau -->
<tr>
<th> Host Name </th>
<th> Hardware </th>
<th> Fixed-Address </th>
<th> Comment </th>
<th> View </th>
<tr>
</thead>
<tbody> <!-- Corps du tableau -->
{% for item in items %}
<tr id="confirm">
{% for key in [ 'host','hardware','fixed_address','comment' ] %}
<td> {{ item[key].decode('utf-8') }}</td>
{% endfor %}
View
</tr>
{% endfor %}
</tbody>
</table>
</div>
That function inside url_for should be the function which displays data and should renders page for displaying data.

pass list of values from html button to python scripts

i have a html template like:
<button id="demo-btn-" >Pack</button>
<table class="table table-striped">
<thead>
<tr>
<th><input type="checkbox" onClick="toggle(this, 'no')"></th>
<th>Invoice</th>
<th>User</th>
<th>Order date</th>
<th>Amount</th>
<th>Status</th>
<th>Tracking Number</th>
</tr>
</thead>
<tbody>
{% for oid,dbd,stts,tp in new_orders %}
<tr>
<td><input type="checkbox" name="no" value="{{oid}}"></td>
<td><a class="btn-link" href="#">{{oid}}</a></td>
<td>Steve N. Horton</td>
<td><span class="text-muted"><i class="fa fa-clock-o"></i>{{dbd}} </span></td>
<td>{{tp}}</td>
<td>{{stts}}</td>
<td>-</td>
</tr>
{% endfor %}
</tbody>
</table>
when i select the checkbox in <thead> all the checkboxes in <tbody> are selected. Now i want, when i select the checkbox and press the pack button, the oid value for each row should be passed to a django view. How to do that?
EDIT:
I want to pass multiple oids as a list to python script. I can do that if i can pass these as a list to django app's views file. I dont know how to pass a list or a value to a django application.

mustache, babel and gettext

I am using Flask, jinja together with Mustachjs.
In order to get the job done I am using the {% raw %} tag.
Now, it is a multi-languages application and I use Babel.
How can I do :
{% raw %}
<script id="details" type="text/template">
<table class="table" >
<thead>
<tr>
<th>**{{gettext('col1')}}</th>
<th>**{{gettext('col2')}}</th>
<th>**{{gettext('col6')}}</th>
</tr>
</thead>
<tbody>
{{#skyrsla}}
<tr>
<td> {{index}}</td>
<td> {{nafn}}</td>
<td> {{mean_growth_index}}</td>
</tr>
{{/skyrsla}}
</tbody>
</table>
</script>
{% endraw %}
Since it is between raw tags, the Babel extension does not detect {{gettext('col1')}
Is there a way to alter the configuration of Babel.
My actual configuration looks like :
[python: **.py]
[jinja2: **/templates/**.html]
extensions=jinja2.ext.autoescape,jinja2.ext.with_
Simply end your raw blocks between calls to gettext:
{% raw %}
<script id="details" type="text/template">
<table class="table" >
<thead>
<tr>
<th>**{% endraw %}{{gettext('col1')}}{% raw %}</th>
<th>**{% endraw %}{{gettext('col2')}}{% raw %}</th>
<th>**{% endraw %}{{gettext('col6')}}{% raw %}</th>
</tr>
</thead>
<tbody>
{{#skyrsla}}
<tr>
<td> {{index}}</td>
<td> {{nafn}}</td>
<td> {{mean_growth_index}}</td>
</tr>
{{/skyrsla}}
</tbody>
</table>
</script>
{% endraw %}

BeautifulSoup: How to extract data after specific html tag

I have following html and I am trying to figure out how exactly I can tell BeautifulSoup to extract td after certain html element. In this case I want to get data in <td> after <td>Color Digest</td>
<tr>
<td> Color Digest </td>
<td> 2,36,156,38,25,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, </td>
</tr>
This is the entire HTML
<html>
<head>
<body>
<div align="center">
<table cellspacing="0" cellpadding="0" style="clear:both; width:100%;margin:0px; font-size:1pt;">
<br>
<br>
<table>
<table>
<tbody>
<tr bgcolor="#AAAAAA">
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<td> Color Digest </td>
<td> 2,36,156,38,25,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0, </td>
</tr>
</tbody>
</table>
Sounds like you need to iterate over a list of <td> and stop once you've found your data.
Example:
from BeautifulSoup import BeautifulSoup
soup = BeautifulSoup('<html><tr><td>X</td><td>Color Digest</td><td>THE DIGEST</td></tr></html>')
for cell in soup.html.tr.findAll('td'):
if 'Color Digest' == cell.text:
print cell.nextSibling.text

Categories