Dane tabelaryczne
Traktowanie całych rzędów jako jeden element
Podświetlanie całego rzędu
Można wykorzystać selektory :hover
i dziecka, aby uzyskać ten efekt:
tr:hover > td {background:red;}
Domyślnie tabele mają odstęp między komórkami, co powoduje, że tło będzie miało przerwy. Na to pomaga:
table {border-collapse:collapse;}
lubtable {border-spacing:0;}
Jest jeszcze kilka sposobów na zmianę wyglądu tabel.
Cały rząd jako jeden odnośnik
Ponieważ odnośniki są elementami liniowymi, nie mogą otaczać całych rzędów tabel. Istnieje na to kilka obejść.
Wiele blokowych odnośników
Treść każdej komórki tabeli należy otoczyć odnośnikiem. Wszystkie odnośniki z wyjątkiem jednego w każdym rzędzie muszą mieć atrybut tabindex="-1"
, żeby nie przeszkadzały
w nawigacji z klawiatury.
<tr>
<td><a href="">
raz</a></td>
<td><a href="" tabindex="-1">
dwa</a></td>
<td><a href="" tabindex="-1">
trzy</a></td>
</tr>
Żeby odnośniki zajmowały całą komórkę, należy je uczynić blokowymi i przenieść odstępy z komórki do odnośnika:
table {border-collapse:collapse;}
td {padding:0;}
td > a {padding:4px;display:block}
Jeden odnośnik i skrypty
Dodawanie wielu odnośników zwiększa objętość kodu, dlatego czasem lepiej jest zrobić jeden i wspomóc się skryptem:
<tr onclick="
this.getElementsByTagName('a')[0].click()
">
<td><a href="">
raz</a></td>
<td>
dwa</td>
<td>
trzy</td>
</tr>
Oczywiście nie trzeba dodawać onclick
do każdego <tr>
z osobna, tylko można to zrobić „hurtem” za pomocą DOM i przypisywania funkcji obsługujących zdarzenia przez JavaScript.
var i,tr = document.getElementsByTagName('tr');
/* znajdz rzędy */for(i=0; i<tr.length; i++)
/* i dla każdego z nich... */tr[i].addEventListener('click', function(){
/* przypisz funkcję */this.getElementsByTagName('a')[0].click()
/* która znajdzie i „kliknie” pierwszy <a> */},false);
skrypt pisany „z palca” = nie testowałem
Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.
Zmodyfikowano: 30.08.2006, 01:00