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 1 | Komórka 2, 3 | |
---|---|---|
Komórka 4 | Komórka 5 | Komórka 6 |
Komórka 7 | Komórka 8 | Komórka 9 |
Komórka 10 | Komórka 11 | Komórka 12 |
Komórka 13 | Komórka 14 | Komórka 15 |
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
).Wszystko działa nawet w 2023, więc nie wiem w czym problem ;)