Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]zebraTable+ show_hide
Forum PHP.pl > Forum > Przedszkole
sanktus
Witam
Mam problem ze stworzeniem tzw zebraTable w polaczeniu z tzw show and hide. Zebra table napisana jest w taki sposob
  1. <?php
  2. function stripe()
  3. {
  4.    var tab = document.getElementById('tabelka');
  5.    var rows = tab.getElementsByTagName('tr');
  6.    var even = false;
  7.              
  8.    for (var i=0; i<rows.length; i++)
  9.    {
  10.        if (even)
  11.            rows[i].className += " even";
  12.      
  13.        even = !even;
  14.    }
  15. }
  16. ?>


w stylach mam cos takiego
  1. <?php
  2. <style type="text/css">
  3.    #tabelka {background-color: #F9F9F9;  padding: 5px; font: 10pt Georgia}
  4.    #tabelka tr.even {background-color: #00FF00}
  5.    </style>
  6. ?>

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:

  1. function start_section( $id,$product )
  2. {
  3. ?>
  4.  
  5.  
  6.  
  7.  
  8.  <table id="tabelka" width="100%">
  9.  <tr  onMouseOver="this.style.background='orange'" onMouseOut="this.style.background=''" >
  10. <td><input type="checkbox" name="ids[]" value="<?php echo( $product['id_wycieczki'] ); ?>" /></td>
  11. <td width="20%"><?php echo( $product['kraj'] ); ?></td>
  12.  
  13. <td width="20%"><?php echo( $product['miasto'] ); ?></td>
  14. <td width="20%" ><?php echo( $product['data_wyjazdu'] ); ?></td>
  15. <td width="20%" ><?php echo( $product['data_przyjazdu'] ); ?></td>
  16. <td width="20%" align="left" ><?php echo($product['cena']); ?><a href="java script: void twist('<?php echo($id); ?>');">
  17. <img src="up.gif" border="0" id="img_<?php echo($id); ?>"/>
  18. </a></td>
  19.  
  20.  
  21. </tr>
  22.  
  23.  
  24.  </table>
  25. <div style="visibility:hidden;position:absolute;"
  26.  id="<?php echo($id); ?>" class="spin-content">
  27. <?php echo $product['miasto'];?>
  28.  </div>
  29. <?php
  30. }
  31. Wyswietlanie wszystkiego odbywa sie w nastepujacy sposob
  32.  
  33. [php]
  34. foreach( $products as $product )
  35. {    
  36.  
  37. start_section($product['id_wycieczki'],$product);
  38. }
  39. ?>

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 questionmark.gif
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
  1. <table class="zebra">
  2. ....


  1. function zebra() {
  2. var aTables=document.getElementByTagName('table');
  3. for(var i=0,j=aTables.length;i<j;i++) {
  4. if(aTables[i].className=="zebra") {
  5. //kolorujesz jak w funkcji stripe
  6. }
  7. }
  8. }

Pisane z palca bez sprawdzania, więc może jakieś detale mi umknęły. ale tak powinno być w teorii winksmiley.jpg
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
  1. <?php
  2. table class="zebra"
  3. ?>
tak??
I jeszce jedno pytanie co mam umiescic w
  1. <?php
  2. if(aTables[i].className=="zebra") {
  3. //kolorujesz jak w funkcji stripe
  4. }
  5. ?>

cos w stylu
  1. <?php
  2. aTables[i].background = FFFF
  3. ?>




Udało się smile.gif Zrobilem cos takiego
  1. <?php
  2. function zebra() {
  3. var aTables=document.getElementsByTagName('table');
  4. for(var i=0,j=aTables.length;i<j;i++) {
  5. if((aTables[i].className=="zebra") && (i%2==0)) {
  6.  
  7. aTables[i].style.backgroundColor="#00FF00";
  8.  
  9.  
  10. } else aTables[i].style.backgroundColor="#FFFFFF";
  11. }
  12. }
  13. ?>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.