javascript css change color of tablerow

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 class="table-header">
        <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 class="table-body">
        <tr>
            <td class="podia" 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 class="podia" 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 class="podia" 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 class="podia" 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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x