Esta es la tabla html y tiene muchos encabezados de tabla como s.no., nombre, etc. Entonces, cada vez que se hace clic en cualquier encabezado, quiero enviar una solicitud de obtención con algunos valores diferentes para cada encabezado.

El siguiente es el código de tabla que he usado.
<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>Espero que este código te ayude.
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>