[css] om de rij een andere kleur

[Verwijderd]

hello Tweaker

Ik heb een vraag over CSS Style Sheets.

Hoe maak ik een table zo, dat het om de regel een andere kleur heeft?

Bijvoorbeeld: - = rood = = blauw
----------------------------------------
=======================
-----------------------------------------
======================= <-- is een rij van een tabel

Ik bedoel dan niet <tr><td class="blaat"></td></tr>
Maar dat hij dat volledig automatisch doet.

Het idee staat op http://vdpol.xs4all.nl/films.htm

Ik wil dus niet per rij dat class="blaat" in gaan vullen, want als ik er dan iets tussen plak, moet ik heel die tabel weer gaan bewerken.

Ik heb google al platbezocht en de search hier ook gebruikt maar ik kon echt niks vinden.

Kan iemand mij daarmee helpen?

Bij voorbaat dank

[.oisyn]

P&W FAQ - HTML / javascript / css, etc...

PW -> WG

[dominic]

Je zou expressions kunnen gebruiken maar dit werkt lang niet altijd..

Het beste kun je d.m.v. script (serverside of clientside) je tabel opbouwen, zodat je iedere rij een andere classname kunt geven..

[Verwijderd]

Maak gebruik van het colgroup en col element, en pas daar de styles op toe. Dit werkt in Internet Explorer wel.

Voor Mozilla kun je misschien wel wat leuke dingen uithalen met CSS3 selectors.

[edit]
Sorry, dat colgroup gebeuren is een foutje, ik had niet goed gelezen. In IE kun je zoiets dus nog niet met louter CSS oplossen.

--

Het netste is misschien een class="even" of class="odd" aan de <tr> hangen, en de rest met CSS selectors oplossen.

[ Voor 39% gewijzigd door Verwijderd op 18-11-2003 21:51 ]

[Verwijderd]

dominic schreef op 18 november 2003 @ 21:43:

Het beste kun je d.m.v. script (serverside of clientside) je tabel opbouwen, zodat je iedere rij een andere classname kunt geven..

En op welke manier moet je dat doen?

[Justice]

Wanneer de CSS property eindelijk ondersteund gaat worden door de browsers heb je de mogelijkheid het volgende in te voeren. Nu werkt het volgens mij niet of nauwelijks, maar het niet ondersteunen ervan heeft geen nadelige gevolgen:

code:

tr:nth-child(even) {
    background: #eee;
}

[kleautviool]

Ik ben geen javascript-held, maar zoiets dergelijks kan toch ook?:

JavaScript:

<script type="text/javascript">
<!--
    function kleur()
    {
        document.getElementsByTagName("tr").style.backgroundColor = document.getElementsByTagName("tr").style.backgroundColor == "white") ? blue:white;
    }
//-->
</script>

[crisp]

kleautviool schreef op 18 november 2003 @ 22:10:
Ik ben geen javascript-held, maar zoiets dergelijks kan toch ook?:

[...]

Nee, getElementsByTagName geeft een collection terug, en daarbij als de style impliciet is toegekent dmv een class kan je de backgroundColor zo niet uitvragen.
_{en stop aub met die hide-this-script-from-stoneage-browsers dingetjes gebruiken}

[Verwijderd]

Voor Mozilla en waarschijnlijk ook Opera kan je dit gebruiken:

HTML:

tr {
    background:lightblue;
}
tr+tr {
    background:darkblue;
}
tr+tr+tr {
    background:lightblue;
}
etc etc

Voor IE zal je de hele tabel moeten afgaan en background properties via javascript moeten bepalen. (nextSibling, oid).

bijv.

HTML:

row1 = document.getElementsByTagName("tr").item(0);
row2 = row1.nextSibling;

[Kippenijzer]

Verwijderd schreef op 18 november 2003 @ 21:42:
Het idee staat op http://vdpol.xs4all.nl/films.htm

Tja, als je die code bekijkt, dan zie je dat ook zei iedere td een class geven die de kleur bepaald. Als je in harde htmnl code, moet je daar gewoon eens mee stoppen, en het met bijvoorbeeld php gaan doen, ook minder ardeidsintensief dan om iets toe te voegen, en php (of ander gebruikt taaltje) zorgt er dan wel voor dat overal netjes de juiste class bij komt zodat hij om en om een andere kleur heeft...

[Verwijderd]

Verwijderd schreef op 18 november 2003 @ 21:55:
En op welke manier moet je dat doen?

JavaScript:

function AlternateRows( sID, sColor1, sColor2 ) {
    oTable = document.getElementById(sID);
    if(oTable) {
        var aRows = oTable.getElementsByTagName('tr');
        for(var i=0; i<aRows.length; i++) {
            if(i%2) aRows[i].style.backgroundColor = sColor1;
            else aRows[i].style.backgroundColor = sColor2;
        }
    }
}

HTML:

<body onload="AlternateRows('testTable','#FF0','#F0F');">
    <table id="testTable">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>I</td>
            <td>II</td>
            <td>III</td>
        </tr>
    </table>
</body>

Zoiets?

[Clay]

op aboutbabette staat een handig overzicht van selectors, de perfecte voor dit probleem staat er ook maar die wordt nou net nergens ondersteund

[Verwijderd]

Verwijderd schreef op 19 november 2003 @ 11:57:
[...]

JavaScript:

function AlternateRows( sID, sColor1, sColor2 ) {
    oTable = document.getElementById(sID);
    if(oTable) {
        var aRows = oTable.getElementsByTagName('tr');
        for(var i=0; i<aRows.length; i++) {
            if(i%2) aRows[i].style.backgroundColor = sColor1;
            else aRows[i].style.backgroundColor = sColor2;
        }
    }
}

HTML:

<body onload="AlternateRows('testTable','#FF0','#F0F');">
    <table id="testTable">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>I</td>
            <td>II</td>
            <td>III</td>
        </tr>
    </table>
</body>

Zoiets?

You are da best!!!

[Verwijderd]

Verwijderd schreef op 12 december 2003 @ 12:10:

You are da best!!!

Better late than never

[Verwijderd]

Andere oplossing: http://www.letselplein.nl/~exemplarisch/alternate-row-color/ (van creative8500)

[Verwijderd]

Verwijderd schreef op 12 december 2003 @ 13:28:
Andere oplossing: http://www.letselplein.nl/~exemplarisch/alternate-row-color/ (van creative8500)

Die is inderdaad iets netter, met de check op TBODY maar ik vind het zetten van de className niet OK omdat het dan de orignele className overschrijft. Het zou beter zijn als je de string 'even' of 'odd' aan de className toevoegt.

[creative8500]

Blues:
Ik vind het zetten van de className niet OK omdat het dan de orignele className overschrijft. Het zou beter zijn als je de string 'even' of 'odd' aan de className toevoegt.

Ik vind het zelf ook niet goed zo, inderdaad, door die classname te overschrijven. Op mijn todolijstje zal ik hem extra onderstrepen

[rewind.]

ik kick dit topic omdat ik via dit topic tot mijn oplossing ben gekomen. ik heb het script van Blus gebruikt om mijn tabel rijen om en om te laten kleuren. Echter wil ik nu ook een rollover voor de hele rij hebben dus heb ik het volgende gedaan:

code:

<tr onMouseover="this.style.backgroundColor='#FFFF00'">

Dit werkt echter de kleur moet op onMouseout terugspringen naar de kleur die die oorspronkelijk had, een vaste kleur toewijzen lukt nog met de onMouseout maar ik weet dus niet hoe ik de oorspronkelijke kleur van de rij terug krijg. Zou iemand me daar mee kunnen helpen?

[Voutloos]

Wellicht handig om dat mouseOver gedoe te vervangen door CSS met een stijl voor active?

[BtM909]

Wat ik altijd doe (werkt iig in de meest recente browsers):

HTML:

<tr onMouseover="this.style.backgroundColor='#FFFF00'" onmouseout="this.style.backgroundColor=''">

[rewind.]

BtM909 schreef op donderdag 13 oktober 2005 @ 12:12:
Wat ik altijd doe (werkt iig in de meest recente browsers):

HTML:

<tr onMouseover="this.style.backgroundColor='#FFFF00'" onmouseout="this.style.backgroundColor=''">

hellaas worden ze dan allemaal 1 kleur als je eraf gaat.

waar ik zelf aan zat te denken was inde onmouseout de functie opnieuw aan te roepen maar ik ben geen held in javascript en het lijkt mij dat dit aardig wat resources zou gaan kosten.

wat betreft css heb ik het volgende geprobeerd:

#prodTable tr:hover {
background-color: #FFFF00;
}

hellaas bleek dit niet te werken

[BtM909]

Stoney187 schreef op donderdag 13 oktober 2005 @ 12:29:
[...]


hellaas worden ze dan allemaal 1 kleur als je eraf gaat.

Welke kleur dan, heb het nl. net hier getest?

wat betreft css heb ik het volgende geprobeerd:

#prodTable tr:hover {
background-color: #FFFF00;
}

hellaas bleek dit niet te werken

:hover werkt in IE (waar je waarschijnlij in test) alleen met een behaviour erbij. In FF zou je op elk elementen moeten kunnen :hoveren.

Clay heeft hier ooit wat voor gemaakt: http://www.xs4all.nl/~peterned/csshover.html

[ Voor 5% gewijzigd door BtM909 op 13-10-2005 12:34 ]

[rewind.]

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function AlternateRows( sID, sColor1, sColor2 ) {
    oTable = document.getElementById(sID);
    if(oTable) {
        var aRows = oTable.getElementsByTagName('tr');
        for(var i=0; i<aRows.length; i++) {
            if(i%2) aRows[i].style.backgroundColor = sColor1;
            else aRows[i].style.backgroundColor = sColor2;
        }
    }
}
</script>

<style>
#testTable tr:hover {
    background-color: #FF0000;
}
</style>
</head>

<body onload="AlternateRows('testTable','#FF0','#F0F');">
    <table id="testTable">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>I</td>
            <td>II</td>
            <td>III</td>
        </tr>
    </table>
</body>
</html>

deze code zou dus in firefox moeten werken? bij mij werkt het iig niet

als ik dit werkend heb zou ik idd verder kunnen werken via het artikel van Clay.

javascript oplossing:
De kleur die hij word bij onmouseout is de als 2e gedefinieerde kleur: sColor2

heb het nog even getest met andere kleuren maar hij pakt daarna dus niet 1 van de vorige kleuren maar gewoon een witte kleur

[ Voor 21% gewijzigd door rewind. op 13-10-2005 13:03 ]

[BtM909]

Stoney187 schreef op donderdag 13 oktober 2005 @ 12:59:


heb het nog even getest met andere kleuren maar hij pakt daarna dus niet 1 van de vorige kleuren maar gewoon een witte kleur

Niet goed gelezen dat je met Javascript je style zet

Als dat dus met CSS was gedaan, dan had je weer je originele style teruggekregen.

[crisp]

doe dan zoiets; style hoort sowieso in CSS thuis:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function AlternateRows( sID )
{
    oTable = document.getElementById(sID);
    if (oTable)
    {
        var aRows = oTable.getElementsByTagName('tr'), i = aRows.length;
        while (i--)
        {
            aRows[i].className += i % 2 ? ' odd' : ' even';
        }
    }
}
</script>

<style type="text/css">
#testTable tr.odd {
    background-color: #ff0;
}
#testTable tr.even {
    background-color: #f0f;
}
#testTable tr:hover {
    background-color: #f00;
}
</style>
</head>

<body onload="AlternateRows('testTable');">
    <table id="testTable">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>I</td>
            <td>II</td>
            <td>III</td>
        </tr>
    </table>
</body>
</html>

[rewind.]

Bedankt! dit was inderdaad de oplossing!

[Boelie-Boelie]

Hoewel het al is opgelost, zijn de volgende links misschien wel handig voor anderen die een tabel willen stylen:
http://validweb.nl/artikelen/javascript/better-zebra-tables/
http://icant.co.uk/csstablegallery/tutorials.php (zie ook de bijbehorende CSS Table Gallery)