Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

Zmiana koloru tła w tabeli po najechaniu kursorem

Aby ułatwić odczytywanie danych z tabel można zastosować funkcję obsługi zdarzeń JavaScript. Funkcja ta działać będzie w następujący sposób: po najechaniu kursorem na dany wiersz tabeli tło całego wiersza będzie zmieniać kolor, a po zdjęciu kursora z wiersza kolor powróci do pierwotnego stanu.

<table style="text-align: center;">
    <tr>
        <th>Komórka 1</th>   
        <th colspan="2">Komórka 2, 3</th>
    </tr>
    <tr onMouseOver="this.style.background='#48C4FF'" onMouseOut="this.style.background='#FFFFFF'">
        <td>Komórka 4</td>   
        <td>Komórka 5</td>   
        <td>Komórka 6</td>
    </tr>
    <tr onMouseOver="this.style.background='#48C4FF'" onMouseOut="this.style.background='#FFFFFF'">
        <td>Komórka 7</td>   
        <td>Komórka 8</td>   
        <td>Komórka 9</td>
    </tr>
    <tr onMouseOver="this.style.background='#48C4FF'" onMouseOut="this.style.background='#FFFFFF'">
        <td>Komórka 10</td>   
        <td>Komórka 11</td>   
        <td>Komórka 12</td>
    </tr>
    <tr onMouseOver="this.style.background='#48C4FF'" onMouseOut="this.style.background='#FFFFFF'">
        <td>Komórka 13</td>   
        <td>Komórka 14</td>   
        <td>Komórka 15</td>
    </tr>
</table>

Przykład:

Najedź kursorem na wiersz poniższej tabeli, aby zobaczyć działanie funkcji.

Komórka 1Komórka 2, 3
Komórka 4Komórka 5Komórka 6
Komórka 7Komórka 8Komórka 9
Komórka 10Komórka 11Komórka 12
Komórka 13Komórka 14Komórka 15

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

,

Dodaj komentarz

Komentarze (2)

  • Tomachawk pisze:

    ciekawe czy autor artykułu sprawdzał czy działa to co napisał

    • Hej Tomachawk,

      Artykuł był z 2013 roku, między czasie wprowadzałem zmiany w działaniu bloga i ogólnie wyglądu strony więc podany przykład nie działał poprawnie. Wpis został właśnie zaktualizowany i efekt działania opublikowanego kodu można już podejrzeć na tabeli umieszczonej w artykule.

      PS: Od 2013 roku trochę się zmieniło i obecnie do uzyskania opisywanego efektu radziłbym wykorzystać style CSS (właściwość hover).

Odpowiedz

Twój adres e-mail nie zostanie opublikowany.

Pin It on Pinterest