Develop Reference

Mimic <a> behavior on hover and on click with javascript

I have a table and each row should link to a page.
I want to keep the structure of the html as is (not a bunch of divs and a grid like Wrapping HTML table rows in <a> tags)
Everything works with the javascript, but I am missing the bottom left tooltip that shows the url on hover from an tag. I also want the option to open in a new tab with CMD (mac) or CTRL (windows/linux).
I am currently doing the solution with jQuery:
$('.clickable-row').on('click', function () {
const url = $(this).attr('data-url')
if (typeof url === 'string') {
window.location.href = url
}
});
My html (twig):
<table class='table'>
<thead>
<tr>
{% for h in data.header %}
<th>{{h|trans}}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in data.rows %}
{% set url = data.getOnClickURL(loop.index - 1) %}
<tr {% if url %} class='clickable-row' data-url="{{url}}" {% endif %}>
{% for r in row %}
<td>{{r|trans}}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>

try this solution without writing Javascript code using only HTML and CSS.
table {
width: 100%;
border-collapse: collapse;
}
table tr {
position: relative;
}
table tr td {
border: 1px solid black;
text-align: center;
}
table tr a {
position: absolute;
width: 100%;
display: block;
height: 100%;
top: 0px;
left: 0px;
}
<table>
<tr>
<td> 1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
</table>

Set the value of a td according to select (Javascript and Flask)

Sorry for my bad English in advance.
I'm new to using Javascript and Flask, but I'm trying to develop an application to manage the transference of clients between managers of a bank.
So far, I suscesfully created the table with the companies of a manager portfolio and in this table the superior can select the manager that will receive the account. In this point, when the new manager is selected, I've created a javascript function to check if the companie has an account in the new spot. The function is working, but only for the first row!!!
this is the js script
<script>
let destino_selec = document.getElementById("{{ row['ID_ROW_GRTE'] }}");
let destino_cc = document.getElementById("cc_dest_{{ row['ID_ROW_GRTE'] }}");
destino_selec.onchange = function(){
inicial = destino_selec.value.indexOf("(");
final = destino_selec.value.indexOf(")");
cd_grte_para = destino_selec.value.substring(inicial+1,final);
// alert(cd_grte_para);
fetch('/select_cli/' + cd_grte_para).then(function(response){
response.json().then(function(data){
//let optionHTML = '<option value="" disabled selected>Selecione o Gerente</option>';
let optionHTML = '';
count = Object.keys(data).length;
if (count > 0) {
optionHTML += '<i class="fa fa-check-circle" aria-hidden="true" style="color: green"></i>';
} else {
optionHTML += '<i class="fa fa-times-circle" aria-hidden="true" style="color: red"></i>';
}
// destino_cc.innerHTML = optionHTML;
destino_cc.innerHTML = optionHTML;
});
});
}
</script>
This is the html piece:
{% block main %}
<span><br></span>
<form action="" method="post">
<div class="row">
<div class="col-5"><h2 class="text-left"
style="padding: 10px ;border-width: 10px;border-left: solid #9d1047"><b>Solicitação de tranferências</b></h2></div>
<div class="col-7" style="padding: 10px "><input type="submit" value="Solicitar" class="btn btn-primary fw-bold mb-2"
style="left: 86%; position:relative; z-index: 2; background-color: #9d1047; border-color:#9d1047"/></div>
</div>
<table id="data" class="tabela-historica">
<thead>
<tr>
<th width=15% rowspan=2 >Cliente </th>
<th width=19% rowspan=2 >Origem </th>
<th width=1% rowspan=2 >cc </th>
<th width=15% colspan=2 >Saldo </th>
<th width=19% rowspan=2 >Destino </th>
<th width=1% rowspan=2 >cc </th>
<th width=10% rowspan=2 >Movimento </th>
<th width=15% rowspan=2 >Motivo </th>
<th width=5% rowspan=2 ><span>Selecionar </span><input type="checkbox" onClick="toggle(this)" /></th>
</tr>
<tr>
<th>Atual</th>
<th>Melhor Ponto</th>
</tr>
</thead>
<tbody height: 100%>
{% for row in tbl_cli %}
<tr>
<td>{{ row['NM_CLI'] }} <br>
{% if row['NM_CLI'] == row['NM_GRP_FAMILIAR'] %}
{% else %}
<b> Família: </b>{{ row['NM_GRP_FAMILIAR'] }}
{% endif %}
<!-- <b>Família: </b>{{ row['NM_GRP_FAMILIAR'] }} </td> -->
</td>
<td> <b>Ger: </b>{{row['NM_ABDO_GRTE_DE']}} ({{ row['CD_GRTE_DE'] }})<br> <b>Ag: </b> {{ row['NOMEAG_DE'] }} ({{row['CODAG_DE']}}) </td>
<!-- <td>{{row['cc_orig']}} </td> -->
<td style="text-align: center">
{% if row['CTA_CORRENTE'] %}
<i class="fa fa-check-circle" aria-hidden="true" style="color: green"></i>
{% else %}
<i class="fa fa-times-circle" aria-hidden="true" style="color: red"></i>
{% endif %}
</td>
<td>{{row['SLD_TOT_MM']}} <br> <b>Fam: </b>{{row['SLD_TOT_FAMILIAR_MM']}} </td>
<td>{{row['SLD_TOT_MAX_MM']}} <br> <b>Fam: </b>{{row['SLD_TOT_FAMILIAR_MAX_MM']}} </td>
<td>
<select class="form-select" style="font-size: 10px; width: 100%" name="ger_escolhido" id="{{ row['ID_ROW_GRTE'] }}">
<option value="" disabled selected>Selecione o gerente destino</option>
{% for ger in tbl_codger %}
<option style="font-size: 10px;" name="{{ ger['CHAVE'] }}"">{{ ger['CHAVE'] }}</option>
{% endfor %}
</select>
</td>
<td id="cc_dest_{{ row['ID_ROW_GRTE'] }}" ></td>
<td>if segmento <br> if agencia </td>
<td> <textarea class="form-control" name="motivo" style="font-size: 10px;" placeholder="Descreva o motivo..."></textarea> </td>
<td style="text-align: center;"><input type="checkbox" value="{{ row['ID_ROW_GRTE'] }}" name="boxes"/></td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
{% endblock %}
Could you help me to point where I'm making an error?

Think of it this way
In your html, you are looping over a collection of items and creating rows based on those items.
In your script code, you are NOT looping. You have simply created a single instance of your script code.
To use your code as is, you have 2 options
a) Attach that script code inside the loop in your html i.e. your html loop will create the table row and also attach the script code to it.
b) Keep your html loop as is, then also put the script code in a loop i.e. do something like
{% for row in tbl_cli %}
<Script>.....
{% endif %}
A better option would be to change your script so that it is triggered on a class i.e. change your script code to something like below. The advantage is that you don't have to loop the script (as I mentioned before). The script below is saying - find all elements with a class of form-select and for each one of them, attach the code to the onchange event.
document.querySelectorAll(".form-select").forEach(function(element) {
element.onchange = ......
})
Because your script will most likely 'exist' before the table rows are created, you should 'attach' it to something that exists at the same time as when your script is created. This means you do something like
document.querySelectorAll("table#data tr.form-select").forEach(function(element) {
element.onchange = ......
})

Posting Dynamic table Form values using Jquery and fetching that post in django view

I know this is not the conventional method but I wanted to try this out and make it successful.
Here is a html file that I am rendering using a django view.
{% extends 'base.html' %}
{% block table_name %}Invoice{% endblock %}
{% block table_view %}
<form method="POST" action="/submit" id="myForm">
{% csrf_token %}
<table border="1" class="center table-responsive table table-striped" width="100%" cellspacing="0" style="padding-left:418px" id="table">
<thead>
<tr>
<th colspan="6">INVOICE</th>
</tr>
</thead>
<tr>
<th COLSPAN="3">INVOICED TO</th>
<td colspan="4" class="center">
<input list="show" type="text" class="center" style="width:100%" name="client_name">
<datalist id="show">
{% for client in clients %}
<option value="{{ client.first_name }}"></option>
{% endfor %}
</datalist>
<br><br><textarea type="text" name="client_address" placeholder="Address" style="width:100%" rows="3"></textarea></td>
</tr>
<tr>
<th COLSPAN="3">INVOICED FROM</th>
<td colspan="4" class="center"><input type="text" name="company_name" style="width:100%" placeholder="Company Name"><br>
<br><textarea type="text" name="company_address" placeholder="Address" rows="3" style="width:100%"></textarea></td>
</tr>
<tr>
<th COLSPAN="3">VESSEL NAME</th>
<td colspan="4" class="center"><input name="vessel_name" style="width:70%" type="text" placeholder="Vessel Name"></td>
</tr>
<tr>
<th COLSPAN="3">PO NUMBER</th>
<td colspan="4" class="center"><input type="text" name="po" style="width:70%" placeholder="PO number"></td>
</tr>
<tr>
<th COLSPAN="3">INVOICE NUMBER</th>
<td><input name="invoice_number" type="text" placeholder="#/2021" disabled></td>
<th>DATE</th>
<td colspan="" class="center"><input type="date" name="date"></td>
</tr>
<tr CLASS="CENTER">
<th>S. NO.</th>
<th COLSPAN="2">PARTICULARS</th>
<th COLSPAN="1">GST</th>
<th colspan="2">TOTAL AMOUNT</th>
</tr>
<tr CLASS="CENTER">
<td class="center">1</td>
<td COLSPAN="2" class='center'><input type="text" name="product1" placeholder="Name of product"></td>
<td><input type="number" name="gst1" placeholder="gst"></td>
<td COLSPAN="2"><input name="cost1" type="number" placeholder="cost"></td>
</tr>
</table>
<center><button type="button" class="btn btn-primary btn-lg add-row">add row</button>
<button type="button" class="btn btn-warning btn-lg" id="submitBtn">Submit</button></center>
</form>
{% endblock %}
{% block script %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
let lineNo = 2;
$(document).ready(function () {
$(".add-row").click(function () {
new_line = "<tr CLASS='CENTER'> <td class='center'>"+lineNo
+"</td><td COLSPAN='2' class='center'><input type='text' name='product"+lineNo
+"' placeholder='Name of product'></td><td><input type='number' name='gst"+lineNo
+"' placeholder='gst'></td><td COLSPAN='2'><input name='cost"+lineNo
+"' type='number' placeholder='cost'></td></tr>";
tableBody = $("#table");
tableBody.append(new_line);
lineNo++;
});
});
$(document).ready(function(){
$("#submitBtn").click(function(){
var $form = $(this);
var datastr = $form.serialize();
<!-- $.ajax({-->
<!-- type: "POST",-->
<!-- url: "/submit",-->
<!-- data: datastr-->
$.post(
'/submit',datastr,function(){
console.log("done");
});
<!-- $("#myForm").submit(); // Submit the form-->
});
});
</script>
{% endblock script%}
The problem occurs when I try posting the form after adding new rows.
When I use print(request.POST) in views the query dictionary has values till the input with name "cost1".
Please help me out on how to get all the values of the form, after adding rows, into post.

Show/hide a table row based on nested class

I have a button on a page that I want to only show rows that have a certain class (target-class in my example) within them. If you press the button again, then all rows are shown.
I'm not sure how to check if target-class is within <tr class="show-hide-this-one">
<button id="btn-toggle_target" type="button">Show Targets Only</button>
<table>
<tbody>
{% for item in first_list %}
<tr class="show-hide-this-one">
<td> {{ item.title }} </td>
<td>
<table><tbody>
{% for subitem in item.sublist %}
<tr>
<td>
{{ subitem.value }}
{% if value == 0 %}
<span class="target-class"> Looking for this one </span>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody></table>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<script type="text/javascript">
function toggleTarget() {
$btnToggle = $("#btn-toggle_target")
var showTargetOnly = $btnToggle.hasClass("target-only")
if (showTargetOnly) {
$btnToggle.html("Show Targets Only").removeClass("target-only");
$().show();
}
else {
$btnToggle.html("Show All Records").addClass("target-only");
$().hide();
}
}
(function () {
$("#btn-toggle_target").on('click', function() {
toggleTarget();
});
}());
</script>

it was not so easy because you dont have class or id but with a little loop its ok:
$("#btn-toggle_target").on('click', function() {
toggleTarget();
});
function toggleTarget() {
var showTargetOnly = $("#btn-toggle_target").hasClass("target-only");
if (showTargetOnly) {
$("#btn-toggle_target").html("Show Targets Only").removeClass("target-only");
$(".show-hide-this-one table tr").show();
}
else {
$("#btn-toggle_target").html("Show All Records").addClass("target-only");
$(".show-hide-this-one table td").each(function(){
if($(this).find(".target-class").length == 0) $(this).closest("tr").hide();
})
//this loop coul be replaced by
//$(".show-hide-this-one table td:not(:has(.target-class))").closest("tr").hide();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-toggle_target" type="button">Show Targets Only</button>
<table>
<tbody>
<tr class="show-hide-this-one">
<td> Item 1 </td>
<td>
<table><tbody>
<tr>
<td>
0
<span class="target-class"> Looking for this one </span>
</td>
</tr>
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr class="show-hide-this-one">
<td> Item 2 </td>
<td>
<table><tbody>
<tr>
<td>
4
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
i think, you could replace this loop :
$(".show-hide-this-one table td").each(function(){
if($(this).find(".target-class").length == 0) $(this).closest("tr").hide();
})
by
$(".show-hide-this-one table td:not(:has(.target-class))").closest("tr").hide();

for loop swig, nodejs

i'm trying to create a loop..
here's the javascript:
for (var j = 0; j < b; j++) {
if(j%4 == 0 && j != 0){
newTable.appendChild(tr);
tr = document.createElement('tr');
}
i want max 4 cells each rows, so if i have 9 cells, i should have 2 full rows and 1 row with only one cell.
how do we set a condition with swig like javascript?
here's my html code:
<table id="asdf">
<tbody>
{% if styles in styles.length %}
<tr>
{% for style in styles %}
<td>
<table border="1">
<tbody>
<tr><td><div style="width: 175px;height: 250px" id="products"><img id="img" src="{{style.img}}" ></div></td></tr>
<tr><td id="styleno">{{style.style}}</td></tr>
</tbody>
</table>
</td>{% endfor %}
</tr> {% endif %}
</tbody>
</table>
</div>

{% for style in styles %}
{% if loop.index0 % 4 === 0 && loop.index0 !== 0 %}
<tr>
{% endif %}
<td>
<table border="1">
<tbody>
<tr>
<td><div style="width: 175px;height: 250px" id="products"><img id="img" src="{{style.img}}" ></div></td></tr>
<tr><td id="styleno">{{style.style}}</td></tr>
</tbody>
</table>
</td>
{% endfor %}