javascript css change color of tablerow-CodePudding

This table is supposed the change the color of the table rows as you click them. The color has to change to a background color of black with a white font.

With javaScript the color is changed when you click a row. Only the most left td with class='podia' doesn't change to the black background color.

I tried a lot of things but nothing seems to work and I'm probably missing the knowledge here. Does someone here know how I can solve this?

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        /* table of festival program */
        #programmering {
            border-collapse: separate;
            border-color: transparent;
            border-spacing: 3px;
            width: 100%;
        }

        /* style of header */
        .table-header {
            font-weight: bold;
            background-color: #5f9ea0;
            text-align: left;
            color: white;
            border-color: transparent;
        }
        /* padding td's */
        td {
            padding: 5px;
        }

        /* background-color of table */
        .table-body{
            background-color: #b0c4de;
        }

        /* style of the most left column */
        .podia {
            background-color: #5f9ea0;
            text-align: right;
            color: white;
        }

        /* Style of selected-row */
        .selected-row {
            color: white;
            background-color: black;
        }
    </style>
</head>
<body>
    <table id="programmering">
        <thead >
        <tr>
            <td colspan="2"></td>
            <td colspan="2">13:00</td>
            <td colspan="2">14:00</td>
            <td colspan="2">15:00</td>
            <td colspan="2">16:00</td>
            <td colspan="2">17:00</td>
            <td colspan="2">18:00</td>
            <td colspan="2">19:00</td>
            <td colspan="2">20:00</td>
            <td colspan="2">21:00</td>
            <td colspan="2">22:00</td>
            <td colspan="2">23:00</td>
            <td colspan="2">24:00</td>
        </tr>
        </thead>
        <tbody >
        <tr>
            <td  colspan="2">Mainstage:</td>
            <td colspan="3">Kraantje Pappie</td>
            <td colspan="4">The Krooks</td>
            <td colspan="4">Krezip</td>
            <td colspan="5">Lenny Kravits</td>
            <td colspan="6">The Cure</td>
            <td colspan="2">Armin van Buuren</td>
        </tr>
        <tr>
            <td  colspan="2">IBA Parkstad:</td>
            <td colspan="2"></td>
            <td colspan="4">White Lies</td>
            <td colspan="4">Rowwen Heze</td>
            <td colspan="4">J Balvin</td>
            <td colspan="4">Die Antwoord</td>
            <td colspan="6"></td>
        </tr>
        <tr>
            <td  colspan="2">Brightlands:</td>
            <td colspan="2"></td>
            <td colspan="4">Blood Red Shoes</td>
            <td colspan="4">Jack Savoretti</td>
            <td colspan="4">Miles Kane</td>
            <td colspan="4">Mark Rondson</td>
            <td colspan="6"></td>
        </tr>
        <tr>
            <td  colspan="2">Stage 4:</td>
            <td colspan="3">Au/ra</td>
            <td colspan="3">Confidance Man</td>
            <td colspan="2">Nana Adjoa</td>
            <td colspan="4">Barns Courtny</td>
            <td colspan="4">Boef</td>
            <td colspan="8"></td>
        </tr>
        </tbody>
    </table>
    <script>
        let table = document.getElementById("programmering");
        let rows = document.getElementsByTagName("tr");
        for(let i = 1; i < rows.length; i  ) {
            let currentRow = table.rows[i];
            currentRow.addEventListener('click', function() {
                Array.from(this.parentElement.children).forEach(function(elem){
                   elem.classList.remove('selected-row');
                });
                // [...this.parentElement.children].forEach((el) => el.classList.remove('selected-row'));
                this.classList.add('selected-row');
                console.log(currentRow)
    })
}
    </script>
</body>
</html>

CodePudding user response：

This is because you have already styled the cell with the podia class. To style all table cells you need to replace in your styles:

.selected-row

on the

.selected-row td