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>
Related
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>
I am trying to send some values(server_data) to a basic webpage and want to see as a table form.
I reformated my values as a Dataframe and converted them to html format.
But when I display my table, I just see html codes, not table form.
What am I missing?
Python code:
def vip_result(request): (---)
server_data{"SERVER_IP":result1,"PORT":result2,"SERV.STATE":result3,"OPR. STATE":result4}
df=pandas.DataFrame(server_data)
df=df.to_html
return render(request, 'vip_result.html', {"df": df})
Html site:(vip_result.html)
{{df}}
Result page`
<table border="1" class="dataframe">
<thead> <tr style="text-align: right;">
<th></th> <th>SERVER IP</th>
<th>PORT</th>
<th>SERV.STATE</th>
<th>OPR. STATE</th>
</tr> </thead> <tbody> <tr> <th>0</th> <td>10.6.87.17</td> <td>7777</td> <td>UP</td> <td>ENABLED</td> </tr> <tr> <th>1</th> <td>10.6.87.18</td> <td>7777</td> <td>UP</td> <td>ENABLED</td> </tr> <tr> <th>2</th> <td>10.6.87.21</td> <td>7777</td> <td>UP</td> <td>ENABLED</td> </tr> <tr> <th>3</th> <td>10.6.87.21</td> <td>7780</td> <td>UP</td> <td>ENABLED</td> </tr> <tr> <th>4</th> <td>10.6.87.23</td> <td>7781</td> <td>UP</td> <td>ENABLED</td> </tr> <tr> <th>5</th> <td>10.6.87.23</td> <td>7783</td> <td>UP</td> <td>ENABLED</td> </tr> </tbody> </table>`:
Result page that I expect
You need to tell Django to trust the content
{{df | safe}}
This tells Django it can put the HTML in as HTML.
I am trying to fill a form online using selenium and at some point I have to fill a date. I can't use send_keys() since it is not allowed by the page. Instead, when I click on the date field, it pops up a datepicker window that prompts to select the year, and I can do this successfully.
After picking the year, the previous window is removed and a new one that prompts to select the month is displayed. This is done by setting the style from display: none to display: block and to the previous year window the style is set from display: block to display: none.
The problem is that even if the new window is_displayed() and is_enabled() methods return True, the elements of the second window, when using is_displayed() on them returns False, even if the is_enabled() method returns True.
I think that I should refresh the dom elements of my driver, but driver.refresh() puts me back in step 0, where I have to pick the year again.
This is my code:
# Code for selecting year (Works)
dateWindow = driver.find_element_by_xpath('/html/body/div[9]/div[3]/table')
rows = dateWindow.find_elements_by_tag_name("tr")
rows[1].find_element_by_xpath('//span[text()="%s"]' % str_year).click()
# Code for selecting month (Does not work)
dateWindow = driver.find_element_by_xpath('/html/body/div[9]/div[2]/table')
rows = dateWindow.find_elements_by_tag_name("tr")
rows[1].find_element_by_xpath('//span[text()="%s"]' % str_month).click()
In the last line, I get this error:
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
This is the html of the page before selecting the year:
<div class="datepicker-days" style="display: none;">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">June 1993</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
<tr>
<th class="dow">Su</th>
<th class="dow">Mo</th>
<th class="dow">Tu</th>
<th class="dow">We</th>
<th class="dow">Th</th>
<th class="dow">Fr</th>
<th class="dow">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td class="old day">30</td>
<td class="old day">31</td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
...
<td class="day">29</td>
<td class="day">30</td>
<td class="new day">1</td>
<td class="new day">2</td>
<td class="new day">3</td>
</tr>
<tr>
<td class="new day">4</td>
<td class="new day">5</td>
<td class="new day">6</td>
<td class="new day">7</td>
<td class="new day">8</td>
<td class="new day">9</td>
<td class="new day">10</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Clear</th>
</tr>
</tfoot>
</table>
</div>
<div class="datepicker-months" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">1993</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span class="month">Jan</span>
<span class="month">Feb</span>
<span class="month">Mar</span>
<span class="month">Apr</span>
<span class="month">May</span>
<span class="month">Jun</span>
<span class="month">Jul</span>
<span class="month">Aug</span>
<span class="month">Sep</span>
<span class="month">Oct</span>
<span class="month">Nov</span>
<span class="month">Dec</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Clear</th>
</tr>
</tfoot>
</table>
</div>
<div class="datepicker-years" style="display: block;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">1990-1999</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span class="year old">1989</span>
<span class="year">1990</span>
<span class="year">1991</span>
<span class="year">1992</span>
<span class="year">1993</span>
<span class="year active">1994</span>
<span class="year">1995</span>
<span class="year">1996</span>
<span class="year">1997</span>
<span class="year">1998</span>
<span class="year">1999</span>
<span class="year new">2000</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Clear</th>
</tr>
</tfoot>
</table>
</div>
This is the html of the page before selecting the month and after selecting the year:
<div class="datepicker-days" style="display: none;">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">June 1993</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
<tr>
<th class="dow">Su</th>
<th class="dow">Mo</th>
<th class="dow">Tu</th>
<th class="dow">We</th>
<th class="dow">Th</th>
<th class="dow">Fr</th>
<th class="dow">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td class="old day">30</td>
<td class="old day">31</td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
...
<td class="day">29</td>
<td class="day">30</td>
<td class="new day">1</td>
<td class="new day">2</td>
<td class="new day">3</td>
</tr>
<tr>
<td class="new day">4</td>
<td class="new day">5</td>
<td class="new day">6</td>
<td class="new day">7</td>
<td class="new day">8</td>
<td class="new day">9</td>
<td class="new day">10</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Clear</th>
</tr>
</tfoot>
</table>
</div>
<div class="datepicker-months" style="display: block;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">1993</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span class="month">Jan</span>
<span class="month">Feb</span>
<span class="month">Mar</span>
<span class="month">Apr</span>
<span class="month">May</span>
<span class="month">Jun</span>
<span class="month">Jul</span>
<span class="month">Aug</span>
<span class="month">Sep</span>
<span class="month">Oct</span>
<span class="month">Nov</span>
<span class="month">Dec</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Clear</th>
</tr>
</tfoot>
</table>
</div>
<div class="datepicker-years" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">«</th>
<th colspan="5" class="datepicker-switch">1990-1999</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7">
<span class="year old">1989</span>
<span class="year">1990</span>
<span class="year">1991</span>
<span class="year">1992</span>
<span class="year">1993</span>
<span class="year active">1994</span>
<span class="year">1995</span>
<span class="year">1996</span>
<span class="year">1997</span>
<span class="year">1998</span>
<span class="year">1999</span>
<span class="year new">2000</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7" class="today" style="display: none;">Today</th>
</tr>
<tr>
<th colspan="7" class="clear" style="display: none;">Clear</th>
</tr>
</tfoot>
</table>
</div>
Any ideas? Thanks in advance
The desired element is an dynamic element so while selecting the Month you have to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:
Using XPATH:
dateWindow = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "/html/body/div[9]/div[2]/table")))
rows = dateWindow.find_elements_by_tag_name("tr")
rows[1].find_element_by_xpath('//span[text()="%s"]' % str_month).click()
Note : You have to add the following imports :
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
i want to change the color of the borders of my table, i'm using the class .table-bordered the color of borders is grey/silver and i want to change it to black without using css, i used style="border-color:black;" but it doesn't change anything any ideas please ?!!
this is my XML file
<table class="table table-bordered" style="border-color:black;">
<tr class="border-black">
<th class="text-center">
<h3> Bulletin de paie </h3>
</th>
<th class="text-center" align="center">
Adresse
<br></br>
<span t-field="o.adresse"/>
</th>
<th class="text-center" align="center">
Date de paie
<br></br>
<span t-field="o.datedepaie"/>
</th>
</tr>
<tr bordercolor="black">
<th class="text-center">
<strong>Matricule</strong>
<br></br>
<span t-field="o.matricule"/>
</th>
<th class="text-center">
<strong>Nom et Prénom</strong>
<br></br>
<span t-field="o.name"/>
</th>
<th class="text-center">
<strong>CNSS</strong>
<br></br>
<span t-field="o.cnss"/>
</th>
</tr>
<tr bordercolor="black">
<th class="text-center">
<strong>Date de naissance</strong>
<br></br>
<span t-field="o.datenaissance"/>
</th>
<th class="text-center">
<strong>Date d'embauche</strong>
<br></br>
<span t-field="o.dateembauche"/>
</th>
<th class="text-center">
<strong>Fonction</strong>
<br></br>
<span t-field="o.fonction"/>
</th>
</tr>
</table>
<table class="table table-bordered">
<thead>
<tr>
<th>Libellé</th>
<th>Base</th>
<th>Taux (%)</th>
<th>Gains</th>
<th>Retenues</th>
</tr>
</thead>
<tbody class="invoice_tbody">
<tr t-foreach="o.salaire_id" t-as="l">
<th><span t-field="l.libelle"/></th>
<th><span t-field="l.base"/></th>
<th><span t-field="l.taux"/></th>
<th><span t-field="l.gains"/></th>
<th><span t-field="l.retenues"/></th>
</tr>
<tr>
<th colspan="3" class="text-right">
<strong>Total</strong>
</th>
<th class="text-center">
<span t-field="o.total"/>
</th>
<th class="text-center">
<span t-field="o.totall"/>
</th>
</tr>
<tr>
<th colspan="5" class="text-right">
<strong>Net à payer:</strong>
<span t-field="o.net"/>
<br></br>
</th>
</tr>
</tbody>
</table>
</div>
</div>
<div class="footer">
IIRC the border color is set on Rows, td's, and th's. It's out of the top of my head though.
You'd need to alter their border color, not the table's
You should post your CSS file. It would be helpful to see the existing styles. Also, line breaks don't require closing tags. I think your <br></br> are breaking the HTML.
You only need <br />
How can a make a loop using chameleon and pyramid in my html?
I search but i found nothing like that =/
Is easier use javascript in this case?
I use datatable in MACADMIN(bootstrap theme).
<div class="table-responsive">
<table cellpadding="0" cellspacing="0" border="0" id="data-table" width="100%">
<thead>
<tr>
<th>
Rendering engine
</th>
<th>
Browser
</th>
<th>
Platform(s)
</th>
<th>
Engine version
</th>
<th>
CSS grade
</th>
</tr>
</thead>
<tbody>
Maybe put FOR here? like {for x items in "TABLE"}
<tr>
<td>
{orgao_doc[x].nome}
</td>
<td>
{orgao_doc[x].cargo}
</td>
<td>
{orgao_doc[x].coleta}
</td>
<td>
{orgao_doc[x].email}
</td>
<td>
{orgao_doc[x].endereco}
</td>
</tr>
</tbody>
</table>
<div class="clearfix">
</div>
</div>
Use a tal:repeat attribute to repeat parts of a template, given a sequence:
<tbody>
<tr tal:repeat="item orgao_doc">
<td>${item.nome}</td>
<td>${item.cargo}</td>
<td>${item.coleta}</td>
<td>${item.email}</td>
<td>${item.endereco}</td>
</tr>
</tbody>
The <tr> tag is repeatedly inserted into the output, once for each element in orgao_doc. The name item is bound to each element when rendering this part of the template.