Jörg Reinholz: CSS-Hintergrundfarbe mit Javascript ändern

Beitrag lesen

CSS-Hintergrundfarbe mit Javascript ändern

Jörg Reinholz Homepage des Autors 02.02.2016 18:05 (Versionen)

Moin!

Wolltest Du sowas? (Test)

<! doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tabelle</title>
        <style type="text/css">
        .tiger tbody tr:nth-child(1n+1) { background-color:#eef; }
        .tiger tbody tr:nth-child(2n+2) { background-color:#eee; }
        .tiger tbody tr:hover { background-color:#efe; }

        .tiger tbody tr.gewaehlt:nth-child(1n+1) { background-color:#fbc; }
        .tiger tbody tr.gewaehlt:nth-child(2n+2) { background-color:#fbb; }
        .tiger tbody tr.gewaehlt:hover { background-color:#fcb; }
        </style>
    </head>
    <body>
        <table class="tiger" id="auswahl">
            <thead>
                <tr><th>Name</th><th>Vorname</th></tr>
            </thead>
            <tbody>
                <tr><td>Stein</td><td>Hein</td></tr>
                <tr><td>Dipus</td><td>Ö.</td></tr>
                <tr><td>Angne</td><td>Lars</td></tr>
            <tbody>
        </table>

        <script>
        var rows = document.getElementById('auswahl').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
        for (i = 0; i < rows.length; i++) {
            rows[i].addEventListener('click', function() {
                if (this.className=='gewaehlt') {
                    this.className='none';
                } else {
                    this.className='gewaehlt'
                }
            });
        }
        </script>
    <body>
</html>