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 ;)