[JavaScript]zebraTable+ show_hide Opcje

[sanktus]

Witam
Mam problem ze stworzeniem tzw zebraTable w polaczeniu z tzw show and hide. Zebra table napisana jest w taki sposob

[PHP] pobierz, plaintext 
<?php
function stripe()
{
    var tab = document.getElementById('tabelka');
    var rows = tab.getElementsByTagName('tr');
    var even = false;
               
    for (var i=0; i<rows.length; i++)
    {
        if (even)
            rows[i].className += " even";
       
        even = !even;
    }
}
?>
[PHP] pobierz, plaintext 

w stylach mam cos takiego

[PHP] pobierz, plaintext 
<?php
<style type="text/css">
    #tabelka {background-color: #F9F9F9;  padding: 5px; font: 10pt Georgia}
    #tabelka tr.even {background-color: #00FF00}
    </style>
?>
[PHP] pobierz, plaintext 

Normalnie zebra table dziala. W sensie jezeli mam 1 tabelke, ktorej id=tabelka. Jednak chcialem zrobic tzw show_hide + zebraTable. Jednak nie wiem jak zmodyfikowac zebraTable aby dzialal razem z show_hide, ktory wyglada tak:

[PHP] pobierz, plaintext 
function start_section( $id,$product )
{
?>
 
 
 
 
  <table id="tabelka" width="100%">
  <tr  onMouseOver="this.style.background='orange'" onMouseOut="this.style.background=''" >
<td><input type="checkbox" name="ids[]" value="<?php echo( $product['id_wycieczki'] ); ?>" /></td>
<td width="20%"><?php echo( $product['kraj'] ); ?></td>
 
<td width="20%"><?php echo( $product['miasto'] ); ?></td>
<td width="20%" ><?php echo( $product['data_wyjazdu'] ); ?></td>
<td width="20%" ><?php echo( $product['data_przyjazdu'] ); ?></td>
<td width="20%" align="left" ><?php echo($product['cena']); ?><a href="java script: void twist('<?php echo($id); ?>');">
<img src="up.gif" border="0" id="img_<?php echo($id); ?>"/>
</a></td>
 
 
</tr>
  
  
  </table> 
<div style="visibility:hidden;position:absolute;"
  id="<?php echo($id); ?>" class="spin-content">
<?php echo $product['miasto'];?>
  </div>
<?php
}
Wyswietlanie wszystkiego odbywa sie w nastepujacy sposob
 
[php]
foreach( $products as $product )
{    
 
start_section($product['id_wycieczki'],$product);
}
?>
[PHP] pobierz, plaintext 

Problem polega na tym, ze w tej petli jakby nie patrzec tworze kilkanascie tabelek o id="tabelka". Wiec niestety zebraTable nie dziala jak trzeba. Czy jest jakis sposob, aby np zebraTable zliczala tagi table(zamiast tr jak tutaj) i na ich podstawie "kolorowala " wiersze

[osl]

nie możesz tworzyć jednego id dla kilku elementów. id z definicji ma być identyfikatorem, czyli czymś unikalnym.
jeśli już to w id dawaj w pętli id="tabelka$id", żeby otrzymać unikalne id. To jednak wymaga przerobienia funkcji "zebra"
W tym momencie dużo lepsze wydaje mi się podejście w stylu jQuery - operowanie na klasach css.
Pobierasz wszystkie tabelki na stronie, sprawdzasz czy mają odpowiednią klase css i jeśli tak to działasz dalej.

[sanktus]

Czyli nadaje kazdej tabelce inne id w petli, nastepnie w skrypcie zebra table zczytuje kolejne identyfikatory i zliczam tagi tr w jakiejs globalnej zmiennej ?

[osl]

no właśnie problem w tym, że ciężko będzie zczytać kolejne identyfikatory, musiałbyś mieć jakąś tablicę z nimi, co jest mało elastyczne. Dlatego dużo lepszym rozwiązaniem jest dla mnie bazowanie na klasach w css.
zmienna globalna nie jest Ci tu potrzebna, wystarczy zmienna w ramach funkcji

[sanktus]

Moglbys zarzucic jakis pseudokod odnosnie tych klas w CSS. Niestety dopiero zaczynam tworzyc cos w php/js/css i jeszcze nie jestem zbytnio obeznany

[osl]

[HTML] pobierz, plaintext 
<table class="zebra">
....
</table>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
function zebra() {
   var aTables=document.getElementByTagName('table');
   for(var i=0,j=aTables.length;i<j;i++) {
       if(aTables[i].className=="zebra") {
          //kolorujesz jak w funkcji stripe
       }
   }
}
[HTML] pobierz, plaintext 

Pisane z palca bez sprawdzania, więc może jakieś detale mi umknęły. ale tak powinno być w teorii

[sanktus]

Hmm jeszcze mam pytanko, skoro table class = "zebra". To jak ja mam tworzone tabelki w petli, to musze zrobic w php if'a zeby co druga tabelka miala

[PHP] pobierz, plaintext 
<?php
table class="zebra"
?>
[PHP] pobierz, plaintext 

tak??
I jeszce jedno pytanie co mam umiescic w

[PHP] pobierz, plaintext 
<?php
if(aTables[i].className=="zebra") {
//kolorujesz jak w funkcji stripe
}
?>
[PHP] pobierz, plaintext 

cos w stylu

[PHP] pobierz, plaintext 
<?php
aTables[i].background = FFFF
?>
[PHP] pobierz, plaintext 

Udało się Zrobilem cos takiego

[PHP] pobierz, plaintext 
<?php
function zebra() {
var aTables=document.getElementsByTagName('table');
for(var i=0,j=aTables.length;i<j;i++) {
if((aTables[i].className=="zebra") && (i%2==0)) { 
 
aTables[i].style.backgroundColor="#00FF00";
 
 
} else aTables[i].style.backgroundColor="#FFFFFF";
}
}
?>
[PHP] pobierz, plaintext