[JS] Altrow-functie werkt niet in Firefox

[ergodyne1]

Ik gebruik een stukje JS om de achtergrondkleur van mijn tabel om-en-om in te kleuren. Helaas werkt het niet in Firefox. Heeft iemand een tip voor mij?

code:

<style type="text/css">
<!--
.style1 td {
    background-color:#CCCCCC;
    }
.style2 td {
    background-color:#EAEAEA;
    }
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function altRow(tblId,c1,c2) 
        {
            var rows = document.all(tblId).rows; 
            for (r = 0; r < rows.length; r++){
            if ((r==0) || (r % 2) == 0){ rows(r).className = c2; }
            else { rows(r).className = c1; }
        }
}
//-->
</script>

in de body:

<script>
altRow('tabel','style1','style2');
</script>

[ReZ1987]

Als je de beschikking hebt over PHP is zoiets misschien handig:

PHP:

if ($i == 1)
 {
 // Jouw code
 $i = 2;  
 }
 elseif($i == 2)
 {
 //Nog meer code
 $i = 1;
 }

[ergodyne1]

Dat heb ik, alleen ik begrijp hem niet helemaal, ben nog niet een php-king

[ReZ1987]

Hij checked op regel 1 of de variabele "i" een waarde "1" heeft. Als dat zo is, laat PHP zien wat er tussen regel 2 en 5 staat. En daar tussen kun je dan je data neerzetten met de eerste kleur.
Vervolgens, op lijn 4, zet hij de variabele "i" op "2", en gaat dan door met het stuk tussen regel 7 en 10, daar kun je dan je data neerzetten met de tweede kleur.
Ik hoop dat het je nu duidelijker is?

[DizzyWeb]

Je gebruikt document.all, wat alleen in Internet Explorer werkt. Je zal aan de slag moeten met document.getElementById

[Verwijderd]

zoals DizzyWeb al zegt moet je dus document.getElementById gebruiken ipv document.all, maar daarbuiten kan het ook wel iets simpeler volgens mij:

JavaScript:

function rowhigh(row) {
    row.className = "high";
}
function rowlow(row) {
    row.className = "low";
}

HTML:

<tr onMouseOver="javascript:rowhigh(this);" onMouseOut="javascript:rowlow(this);">

Cascading Stylesheet:

TR.high TD {background-color: #CCCCCC;}
TR.low TD {background-color: #EAEAEA;}

[ Voor 9% gewijzigd door Verwijderd op 29-12-2004 21:25 ]

[ergodyne1]

Ik gebruik die JS om de uitgepoepte <td> 's om en om automatisch een achtergrond kleur te geven. Zoals bij Funda bijvoorbeeld gebeurd. Het werkt prima behalve in FF. Ik ga het toch maar proberen op te lossen in JS, de PHP-methode is me net iets boven mijn kunnen van dit moment.

@ sydney: volgens mij is dat net iets anders dan wat ik bedoel...

Wat zou ik precies in mijn huidige JS moeten veranderen (ben ook geen JS-prins )

[ Voor 19% gewijzigd door ergodyne1 op 29-12-2004 21:34 ]

[Verwijderd]

Hier staat een mooi artikel over wat je wilt bereiken:
http://www.alistapart.com/articles/zebratables/

[Grijze Vos]

Verwijderd schreef op woensdag 29 december 2004 @ 21:42:
Hier staat een mooi artikel over wat je wilt bereiken:
http://www.alistapart.com/articles/zebratables/

Je kunt er hier gif op innemen dat altijd iemand je voor is met een linkje naar ALA.

[crisp]

JavaScript:

function altRow(tblId,c1,c2)

  var rows = document.getElementById('tblId').rows, j = rows.length, i = 0, s = 0;
  while (i < j) rows.item(i++).className = (s = 1 - s) ? c1 : c2;

}

Sidney: dat is wat anders, namelijk een bg-swap op mouseover.
Als je al mouseoverkleurtjes toepast probeer het swappen van classNames dan te vermijden - dat is te traag. Verder hoort er in een eventhandler geen javascript:

[drm]

ReZ1987:
Als je de beschikking hebt over PHP is zoiets misschien handig:

PHP:

if ($i == 1)
 {
 // Jouw code
 $i = 2;  
 }
 elseif($i == 2)
 {
 //Nog meer code
 $i = 1;
 }

PHP:

$i = ($i % 2) +1

[T-MOB]

Ik zou de zebra-striping toch in PHP doen. Javascript gebruik je IMO alleen voor wat "extra's". Nu kun je zebra-striping als iets extra's zien maar volgens mij voegt het ook wat toe voor mensen die geen JS willen/kunnen gebruiken. De implementatie met PHP is nog eens makkelijker ook. Ik neem aan dat je data toch uit een database komt, dan is het heel eenvoudig:

PHP:

foreach ($rows as $row)
{
  $class = ($class == 'even') ? 'odd' : 'even';

  echo '<tr class="' .$class .'">';
  /* td's */
  echo '</tr>';
}

[ Voor 15% gewijzigd door T-MOB op 30-12-2004 15:26 ]

[Verwijderd]

ergodyne1 schreef op woensdag 29 december 2004 @ 21:29:
Ik gebruik die JS om de uitgepoepte <td> 's om en om automatisch een achtergrond kleur te geven. Zoals bij Funda bijvoorbeeld gebeurd. Het werkt prima behalve in FF. Ik ga het toch maar proberen op te lossen in JS, de PHP-methode is me net iets boven mijn kunnen van dit moment.

@ sydney: volgens mij is dat net iets anders dan wat ik bedoel...

Wat zou ik precies in mijn huidige JS moeten veranderen (ben ook geen JS-prins )

Ja, verkeerd gelezen Ik dacht dus dat je wilde doen wat ik zei, maar zag net dat je dus zebra striping wilde, en daar is het antwoord ondertussen al op gegeven

edit:
Sidney

crisp schreef op donderdag 30 december 2004 @ 09:51:
Sidney: dat is wat anders, namelijk een bg-swap op mouseover.
Als je al mouseoverkleurtjes toepast probeer het swappen van classNames dan te vermijden - dat is te traag. Verder hoort er in een eventhandler geen javascript:

Op javascript: in een eventhandler heb je me al een keer gewezen, en toch blijf ik het doen /me belooft het nu echt niet meer te doen. En het is idd wat anders, maar ik had dus verkeerd gelezen

[ Voor 4% gewijzigd door Verwijderd op 30-12-2004 16:32 ]

[ergodyne1]

T-MOB schreef op donderdag 30 december 2004 @ 15:25:
Ik zou de zebra-striping toch in PHP doen. Javascript gebruik je IMO alleen voor wat "extra's". Nu kun je zebra-striping als iets extra's zien maar volgens mij voegt het ook wat toe voor mensen die geen JS willen/kunnen gebruiken. De implementatie met PHP is nog eens makkelijker ook. Ik neem aan dat je data toch uit een database komt, dan is het heel eenvoudig:

PHP:

foreach ($rows as $row)
{
  $class = ($class == 'even') ? 'odd' : 'even';

  echo '<tr class="' .$class .'">';
  /* td's */
  echo '</tr>';
}

Ik zal deze gaan proberen. Op welke manier kan ik hier de kleuren bepalen?