Develop Reference

Compare 2 columns data of a row and highlight one having same match using javascript

I have a query regarding javascript. I am working on a structure with nested tables and rows (tr) are in the loop and inside it (td) are also in the loop. I want to compare the data of 2 columns one outside the loop and one td inside the loop and in case of a match would like to highlight the td outside the loop. Here is a piece of code that I wrote but it is highlighting all the rows rather than only the corresponding one. Also, it's not running on all the td which are inside the for-loop.
function highlight_text(){
table = document.getElementById("table");
tr = table.getElementsByClassName("rows");
for (x = 0; x < tr.length; x++) {
td = tr[x].getElementsByTagName("td")[3];
txtValue = td.textContent || td.innerText;
txtValue = txtValue.trim()
search_text = tr[x].getElementsByTagName("td")[5];
search_value = search_text.textContent || search_text.innerText
search_value = search_value.trim()
if (txtValue.toUpperCase().indexOf(search_value.toUpperCase()) > -1) {
const regex = new RegExp(search_value,"gi");
let text = tr[x].getElementsByTagName("td")[3].innerHTML;
text = text.replace(/(<mark>|<\/mark>)/gim, '');
text = text.replace(regex, '<mark>$&</mark>')
td.innerHTML = text
}
}
}
<table id="table" style="border: none;">
{% for a in range(respondent_id|length) %}
<tr class="rows">
<td class="c1" colspan="2"><b>{{ Score[a] }}</b></td>
<td><span style="display:none;" id="id_resp">{{ respondent_id[a] }}</span></td>
<td>
<table width="980px;" style="border-color:white;">
<tr>
<td class="verb">{{ Verbatim_data[a] }}</td>
</tr>
</table>
<table>
<tr>
{% for w in range(Final_L1L2L3|length) %}
<td class="L3_comment" onclick="highlight_text()"><div>{{Final_L1L2L3[w] | safe}} </div></td>
<td style="display: none;" class="search">{{Final_verb[w] | safe}}</td>
{% endfor %}
</tr>
</table>
</td>
</tr>
{{endfor}}
</table>
enter image description here

IS there a way to access data-binding in span tag and store it in a variable in the script tag? knockoutjs

oi
<table class="table table-striped table-sm small" >
<thead class="bg-dark text-light">
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Nationality</th>
<th scope="col" class="text-right"></th>
</tr>
</thead>
<tbody data-bind="foreach: records">
<tr>
<td class="align-middle" data-bind="text:DriverId"></td>
<td class="align-middle" data-bind="text:Name"></td>
<td class="align-middle">
<span id = "nation" data-bind="text:Nationality" class="float-left"> </span>
<img id="flagicon" src="" alt="" class="flag float-right float-center" />
<script>
var alpha_2_code = "pt";
/* for(let i=0; i < countrycodesobj.length ; i++){
if(countrycodes[i].Nationality === (data-bind = "text:Nationality"))
alpha_2_code = countrycodes[i].alpha_2_code;
}*/
var myPath = "https://countryflagsapi.com/png/" + alpha_2_code;
document.getElementById("flagicon").src= myPath;
</script>
</td>
</tr>
</tbody>
I want the information > data-bind="text:Nationality" < stored in a variable in script tag.
Im getting the information from an api and its being handled by knockoutjs. My knockoutjs knowledge is scarce and i dont know if i can access the information data-bind="text:Nationality" in the script tags. Any solution whether in jquery , knockouts or javascript would be perfect.
Thanks in advance.

you could make use of a simple function that you define before you applyBindings with knockout and after your countrycodesobj is defined, sth like:
function getFlagByNationality(n) {
var alpha_2_code = "pt";
for(let i=0; i < countrycodesobj.length ; i++){
if(countrycodes[i].Nationality == n ){
alpha_2_code = countrycodes[i].alpha_2_code;
}
}
return "https://countryflagsapi.com/png/"+alpha_2_code;
}
you can then use this in data-bind attribute:
<img src="" data-bind="attr:{src: getFlagByNationality(Nationality)}" />

Print table information after onclick event in Django

I want to print table row information in a Javascript function bind to the onclick event of a button.
view.py
def table(request):
test_list = TestInformation.objects.order_by()
context = { 'test_list' : test_list, }
return render(request, '/test.html', context)
test.html
<label ~~ id="btn_click" onclick="btn()">
<table class="table table-bordered" id="data_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
{% for li in test_list %}
<tr>
<td> {{ li.Id }} </td>
<td> {{ li.Name}} </td>
</tr>
{% endfor %}
</tbody>
</table>
<Script type="text/javascript">
function btn {
//I'd like to put above {for~~ endfor} source here!
}
</Script>
Currently Action
The table is displayed as soon as you load the html page.
Expected Action
Only visible when the table presses a button
How can I invoke Python objects in JavaScript functions for the actions I expect?

pagination for table rows with fixed tablehead

On my website I created a "dynamic" table. I want to include a pagination, to only show 10 rows at a time. The table head shall be displayed above the rows on every page.
But with my pagination function, all the content within is put under "Ref.". If I uncomment the commented part, the pagination does not work at all.
What needs to changed in my code to display the table correct on each page? (all ref{{i}} under "Ref." / "score{{i}} under "Score" /...)
Table:
{% if empty == False %}
<table style="float: left; width: 100%" class="table table-hover">
<thead id="header">
<tr >
<th>Ref.</th>
<th>Score</th>
<th>Title</th>
</tr>
</thead>
<tbody>
{% for i in range (0,numofresults) %}
<tr id="cardmb3n{{i}}">
<td id="ref{{i}}"> </td>
<td id="score{{i}}" "> </td>
<td>
<div>
<a id="header{{i}}" href=""></a><br>
<a id="hyperlink{{i}}" href="" ></a>
</div>
</td>
</tr>
</tbody>
{% endfor %}
</table>
Pagination:
{% if empty == False %}
function paginate(page){
var val = parseInt(document.getElementById("currentpage").innerHTML);
if(page=='Next'){
page = val + 1;
} else if(page=='Previous'){
page = val - 1;
} else{
page = parseInt(page);
}
if(val!=page){
for(var j = 0; j<ergebnisliste.length; j++){
if(j>=(page-1)*10 && j<10*page){
// document.geElementById("header").style = "display:table";
document.getElementById("cardmb3n" + j).style = "display:block";
}else{
// document.geElementById("header").style = "display:none";
document.getElementById("cardmb3n" + j).style = "display:none";
}
}
........some code.........
}
}
{% endif %}

found a solution: document.getElementById("cardmb3n" + j).style = "display:table-row";

Flask does not return db query when I use the JS hide/unhide. Works if I comment out JS

I am trying to retrieve data from the database based on a users search results. The results, in a table format, should only be shown after the user hits the search button.
Query executes fine when javascript is cancelled out and the table "list" display is changed to block. However, when I enable the javascript I get no results.
<div style="text-align: center;">
{% from "_formhelpers.html" import render_field %}
<form method=post action="/">
<dl style="display: inline-block; text:white;" >{{render_field(form.search)}} </dl>
<button id="searchbutton" type="submit" style="display: inline-block;" class="btn btn-outline-success my-2 my-sm-0" onclick="fetchlist(); return false;">Search</button>
<br>
{% if error %}
<p class = "error"><strong>Error:</strong>{{error}}</p>
{% endif %}
</form>
</div>
<div style="text-align:center;">
<table id="list" style="display:none;" class = "table table-hover" >
<thead>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Rating</th>
<th scope="col">Review</th>
</thead>
<tbody>
{% for row in data %}
<tr>
{% for d in row %}
<td>{{ d }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</body>
<script>
function fetchlist() {
if (document.getElementById('searchbutton').onclick) {
document.getElementById('list').style.display = 'inline';
}
else document.getElementById('list').style.display = 'inline';
}
</script>
{% endblock %}
</html>
#app.route('/', methods=['GET', 'POST'])
def homepage():
try:
form=SearchForm(request.form)
global d1
d1 =""
if request.method == "POST" and form.validate():
search = form.search.data
a = search.split(" ",1)
firstname, lastname = (a[0], a[1])
c,conn = connection()
qry = "SELECT FirstName, LastName FROM posts WHERE FirstName LIKE (%s) AND LastName like (%s)"
c.execute(qry, ((thwart(firstname)), (thwart(lastname))))
d1 = c.fetchall()
c.close()
conn.close()
else: print('error')
return render_template("index.html", data=d1, form = form)
except Exception as e:
return(str(e))

As you already know the problem is caused by your JS. This is because the JS is waiting for the search button to be clicked before it changes the style of the list to inline.
This all seems fine, but the problem comes in the fact that the JS is executed when the button is clicked. But then the request is posted to the server and a new page is sent to the browser with the search results. However, this new page the search button has never been clicked.
You can fix writing the method to display the results into your template. For instance you could wrap the table in an if statement like this...
{% if data|length %}
<div style="text-align:center;">
<table id="list" style="display:none;" class = "table table-hover" >
<thead>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Rating</th>
<th scope="col">Review</th>
</thead>
<tbody>
{% for row in data %}
<tr>
{% for d in row %}
<td>{{ d }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table
</div>
{% endif %}
The |length filter makes sure data is not an empty string. Otherwise I believe it may always be true. You could try {% if data %} to double check. It may work.
There are a lot more options....
You could wrap you <script> in the if statement. You should modify it a little. So it does not wait of the search button to be clicked.
You could wrap the inline style in the if statement. Of course you could use CSS classes instead of inline styling. This would be cleaner.