Keskustelu: Nettisivujen teko: Taulukon taustan vaihtaminen silmukassa

Raikku [12.02.2013 20:51:06]

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="styylit5.css">
        <title></title>
    </head>
    <body>
        <?php
        //määritetään taulukon rivien numerot 1-5
        $taulukko = array ("1", "2", "3", "4", "5");
        //luodaan tekijä count, joka sisältää tekijän $taulukko
        $count = count($taulukko);
        echo "<table border='1'>";
        //echo-komennolla aloitetaan taulukon luonti määrittämällä taulukon reunan paksuudeksi 1
        $rivimaara = 5;
        $nro = 1;
        //asetetaan taulukon rivimääräksi tekijöiden määrä taulukossa (5)
        //asetetaan muuttuja $nro, jonka arvo on 1.
        for($i=0; $i <= $count; $i = $i + $rivimaara)
            {
            echo "<tr class='rivi$nro'>";
            for($z = $i; $z < $rivimaara; $z++)
                {
                if ($taulukko[$i + $z] !=0)
                   echo "<td>Tämä on rivi {$taulukko[$i + $z]}</td></tr>";
                else
                   echo "<td>&nbsp;</td></tr>";
                }
            }
        echo "</table>";
        ?>
    </body>
</html>

.rivi0
{
background-color: #FFFFFF;
}

.rivi1
{
 background-color: #c0c0c0;
}

Eli ideana olisi saada yllämainittu koodi tekemään viiden solun silmukka, jossa joka ensimmäiseen soluun (tässä tapauksessa riveihin 1, 3, ja 5) harmaa tausta ja joka toiseen soluun (rivit 2 ja 4) valkoinen tausta käyttämällä tyylejä sekä muuttujaa $nro, jolla luokka "rivi" vaihdetaan.

Pikainen apu olisi hyväksi.

Metabolix [12.02.2013 21:00:32]

for ($i = 0; $i < 5; ++$i) {
	$j = $i % 2;
	echo "<tr class='rivi{$j}'>\n";
}

Voit myös käyttää pelkkää CSS-koodia:

tr {
	background: #fff;
}
tr:nth-child(odd) {
	background: #ccc;
}

Raikku [12.02.2013 21:21:43]

for ($i = 0; $i < 5; ++$i) {
    $j = $i % 2;
    echo "<tr class='rivi{$j}'>\n";
}

Mihinkäs väliin/minkä tilalle tuo täytyy lyödä, en ihan nyt saanut ajatuksestasi kiinni...

The Alchemist [12.02.2013 21:47:55]

Nyt kyllä mietit tuota niin kauan, että alat tajuta. Eihän tuosta selvemmäksi saa koodia antamatta täysin valmista käteen.

Mutta alkaapi vaan olla turhia tuollaiset luokilla purkkaamiset, kun css on nykyaikaa. Vanhoilla IE:illä kaiken ei tarvitse olla pixel perfect, kunhan sivusto on perusosiltaan käytettävissä, jos niin on erikseen vaadittu.

Yucca [12.02.2013 23:04:35]

The Alchemist kirjoitti:

Mutta alkaapi vaan olla turhia tuollaiset luokilla purkkaamiset, kun css on nykyaikaa. Vanhoilla IE:illä kaiken ei tarvitse olla pixel perfect, kunhan sivusto on perusosiltaan käytettävissä, jos niin on erikseen vaadittu.

Tosin luokkien käyttö ei ole niin hirveän kömpelöä tällaisessa tapauksessa, jossa HTML-koodi luodaan ohjelmalla. Käsin koodatussa HTML:ssä se olisi kömpelöä etenkin ylläpidon kannalta: mitäs jos joudutaan lisäämään yksi rivi alkuun?

Toisaalta CSS:ää käytettäessä IE:n vanhat versiot eivät ole kovin iso ongelma, koska niiden puutteiden tilkitsemiseen löytyy valmista pakkelia (polyfill) kuten Selectivzr.js. Voidaan kirjoittaa modernia CSS:ää ja sitten heittää sopivaan kohtaan yksi script-elementti, joka ottaa käyttöön pakkelin. Kaikkeen ei ole pakkelia, mutta CSS3-selektoreihin kuten :nth-child(...) kyllä.

Metabolix [13.02.2013 17:26:11]

Raikku kirjoitti:

Mihinkäs väliin/minkä tilalle tuo täytyy lyödä, en ihan nyt saanut ajatuksestasi kiinni...

Jos vaikka etsisit omasta koodistasi $i-muuttujaa käyttävän for-rivin ja lähes identtisen echo-rivin yrittäisit sitten sovittaa palasia yhteen.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät