BANDS | CITY | MUNICIPAL | DISTRICT | VILLAGE |
---|---|---|---|---|
EXCOM | 100,000 | 100,000 | 90,000 | 80,000 |
GENERAL MANAGERS | 80,000 | 80,000 | 70,000 | 60,000 |
MANCOM | 70,000 | 70,000 | 60,000 | 50,000 |
SUPERVISOR | 55,000 | 55,000 | 50,000 | 40,000 |
GENERAL STAFF | 40,000 | 40,000 | 30,000 | 30,000 |
table {
width: 102%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
th, td {
padding: 12px;
border: 1px solid #d4af37;
}
th {
background-color: #d4af37;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1;
}
This is the HTML and CSS for this table above. Am asking advice on how to make this table clickable in a that when a user clicks a row it displays the band eg EXCOM, City and the amount in custom fields (all to be automatic).Thanks
HTML
<div id="tableContainer">
<table>
<thead>
<tr>
<th>BANDS</th>
<th>CITY</th>
<th>MUNICIPAL</th>
<th>DISTRICT</th>
<th>VILLAGE</th>
</tr>
</thead>
<tbody>
<tr>
<td>EXCOM</td>
<td>100,000</td>
<td>100,000</td>
<td>90,000</td>
<td>80,000</td>
</tr>
<tr>
<td>GENERAL MANAGERS</td>
<td>80,000</td>
<td>80,000</td>
<td>70,000</td>
<td>60,000</td>
</tr>
<tr>
<td>MANCOM</td>
<td>70,000</td>
<td>70,000</td>
<td>60,000</td>
<td>50,000</td>
</tr>
<tr>
<td>SUPERVISOR</td>
<td>55,000</td>
<td>55,000</td>
<td>50,000</td>
<td>40,000</td>
</tr>
<tr>
<td>GENERAL STAFF</td>
<td>40,000</td>
<td>40,000</td>
<td>30,000</td>
<td>30,000</td>
</tr>
</tbody>
</table>
<div id="displayArea">
<h3>Selected Band Details</h3>
<p id="band"></p>
<p id="city"></p>
<p id="municipal"></p>
<p id="district"></p>
<p id="village"></p>
</div>
</div>
Replace hardcoded values with Jinja
JS
const table = document.querySelector("table");
const bandField = document.getElementById("band");
const cityField = document.getElementById("city");
const municipalField = document.getElementById("municipal");
const districtField = document.getElementById("district");
const villageField = document.getElementById("village");
table.addEventListener("click", function(event) {
const target = event.target;
const row = target.closest("tr");
if (row) {
const cells = row.querySelectorAll("td");
bandField.textContent = "Band: " + row.cells[0].textContent;
cityField.textContent = "City: " + cells[0].textContent;
municipalField.textContent = "Municipal: " + cells[1].textContent;
districtField.textContent = "District: " + cells[2].textContent;
villageField.textContent = "Village: " + cells[3].textContent;
}
});