Interactive HTML Table

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; }
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
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;
        }
    });