0
161
VistasHow to send get request when table head of a html page is clicked?
This is the html table and it has many table headers like s.no., first name, etc. So whenever any header is clicked I want to send a get request with the some values different for each headers.
The following is the table code I have used.
<table class = "table" style = "margin-left:auto;margin-right:auto">
<thead>
<tr>
<th id = "s.no.">S.No.</th>
<th id = "fname">First Name</th>
<th id = "lname">Last Name</th>
<th id = "email">Email</th>
<th id = "password">Password</th>
<th id = "dob">Date of Birth</th>
<th id = "gender">Gender</th>
<th id = "hobbies">Hobbies</th>
</tr>
</thead>
<tbody>
{% for candidate in candidates%}
<tr>
<td>{{candidate.id}}</td>
<td>{{candidate.fname}}</td>
<td>{{candidate.lname}}</td>
<td>{{candidate.email}}</td>
<td>{{candidate.password}}</td>
<td>{{candidate.dob}}</td>
<td>{{candidate.gender}}</td>
<td>{{candidate.hobbies}}</td>
</tr>
{% endfor %}
</tbody>
</table>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
I hope this code will help you
let tableHead = document.getElementsByTagName("thead")[0];
tableHead.addEventListener("click", function(){
httpRequest = (url, method = 'GET') => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = () => {
if (xhr.status === 200) { resolve(xhr.responseText); }
else { reject(new Error(xhr.responseText)); }
};
xhr.send();
});}
}); <table class = "table" style = "margin-left:auto;margin-right:auto">
<thead>
<tr>
<th id = "s.no.">S.No.</th>
<th id = "fname">First Name</th>
<th id = "lname">Last Name</th>
<th id = "email">Email</th>
<th id = "password">Password</th>
<th id = "dob">Date of Birth</th>
<th id = "gender">Gender</th>
<th id = "hobbies">Hobbies</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta