Striedanie farebných riadkov v tabuľke

Pri výpise nejakých údajov z databázy do prehľadnej tabuľky je vhodné striedať farebnosť riadkov a prípadne aj zabezpečiť, aby sa daný riadok po nabehnutí kurzorom farebne zmenil – vysvietil.
Samotné striedanie farebnosti (napr. párny = šedý, nepárny = biely) je veľmi jednoduché, a deje sa na základe určovania párnosti riadku. To znamená, že pri výpise záznamov z tabuľky musíme počítať koľkatý záznam práve vypisujeme a zistiť či je párny alebo nie.

<?
$q="SELECT * FROM tabulka";
$query=mysql_query($q);
 
// nahráme výstup z DB do poľa a while cyklom ho prechádzame
 
$x=0; // počítadlo, začíname počítať od nuly!
 
echo '<table>';
 
while($row=mysql_fetch_assoc($query)) {
 
    if ($x % 2 == 0) { // pokiaľ je $x (počítadlo) deliteľné dvoma bezo zvyšku, riadok je párny a nastavíme premennú na "seda"
       $csstrieda = "seda";
    } else { // pokiaľ $x nie je deliteľné dvomi, riadok je nepárny, nastavíme premennú na "biela"
       $csstrieda = "biela";
    }
 
    echo '<tr class="' . $csstrieda . '"><td></td></tr>';
 
   $x++; // pripočítanie +1 k počítadlu
 
}
 
echo '</table>';
 
?>

Pokiaľ by sme chceli našu tabuľku ešte viac user-friendly, tak je dobré, aby sa vysvietil vždy ten riadok, na ktorom má uživateľ kurzor. To docielime prostredníctvom atribútov onmouseover a onmouseout. Náš predchádzajúci skript by po novom vyzeral takto:

<?
$q="SELECT * FROM tabulka";
$query=mysql_query($q);
 
// nahráme výstup z DB do poľa a while cyklom ho prechádzame
 
$x=0; // počítadlo, začíname počítať od nuly!
 
echo '<table>';
 
while($row=mysql_fetch_assoc($query)) {
 
    if ($x % 2 == 0) { // pokiaľ je $x (počítadlo) deliteľné dvoma bezo zvyšku, riadok je párny a nastavíme premennú na "seda"
       $csstrieda = "seda";
    } else { // pokiaľ $x nie je deliteľné dvomi, riadok je nepárny, nastavíme premennú na "biela"
       $csstrieda = "biela";
    }
 
    echo '<tr class="' . $csstrieda . '" onmouseover="this.className='vysviet_riadok';" onmouseout="this.className=\'' . $csstrieda. ' \';"><td</td</tr>';
 
   $x++; // pripočítanie +1 k počítadlu
 
}
 
echo '</table>';
 
?>

Všimnite si, že pri výpise riadku tabuľky (echo '<tr class …) pribudli dva HTML/JS atribúty onmouseover a onmouseout. Keď uživateľ prejde kurzorom cez daný riadok, zmení sa CSS trieda tohto riadku na triedu s názvom „vysviet_riadok“. Naopak, keď kurzorom z riadku odíde, trieda sa zmení naspäť na triedu príslušnú párnemu alebo nepárnemu riadku,

Táto ukážka samozrejme predpokladá, že máte v CSS stylesheete korektne nadefinované všetky používané CSS triedy!

Tomáš Mašek