Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak ukryć wiersze lub kolumny w tabeli?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Wave
Mam problem ponieważ metoda na ukrywanie DIVów nie działa z elementami tabeli, a przypisywanie id każdej komórce jest męczące, więc jak ukryć TYLKO taki kawałek kodu:
  1. ...
  2. <tr>
  3. <td></td>
  4. <td></td>
  5. <td></td> ...
  6. </tr>
  7. <tr>
  8. <td></td>
  9. </tr>
  10. <tr>
  11. <td></td>
  12. </tr>
  13. ...

Ma ktoś jakiś pomysł?
Zajec
Na początek poczytaj o strukturze tabel. Bo temat nie jest Ci chyba znany :?

Ja bym każdemu wierszowi, który chcesz ukryć nadał jakiś class, a potem skryptem JS wyszukał wszystkie tr i te, które mają odpowiedni className ukrył poprzez nadanie display: none;
Wave
Cytat
Na początek poczytaj o strukturze tabel. Bo temat nie jest Ci chyba znany :?

Co masz na myśli?

Po drugie gdybym wiedział jaki kod w js napisać to bym się tu nie pytał, więc może podasz przykład.
revyag
Kod
<script type="text/javascript">
function sh(){
    var trs = document.getElementsByTagName("tr");
    for(i=0;i<trs.length;i++){
        if(trs[i].className=="h"){
            if(trs[i].style.display=='none') trs[i].style.display='block';
            else trs[i].style.display='none';
        }
    }
}
</script>

Przykład:
  1. <table width="190" >
  2. <tr>
  3. <td>1</td>
  4. </tr>
  5. <tr class="h">
  6. <td>aaa</td>
  7. </tr>
  8. <tr class="h">
  9. <td>bbb</td>
  10. </tr>
  11. <tr class="h">
  12. <td>cccc</td>
  13. </tr>
  14. <tr>
  15. <td>2</td>
  16. </tr>
  17. <button onclick="sh()">but</button>
Wave
Wielkie dzięki.
Zajec
Cytat
Cytat
Na początek poczytaj o strukturze tabel. Bo temat nie jest Ci chyba znany :?

Co masz na myśli?
Każdy wiersz musi mieć tyle samo komórek. Ewentualnie możesz łaczyć komórki za pomocą colspan/rowspan. Jeżeli dobrze o tym wiedziałeś to sorki, ale wolałem uprzedzić, zebyś w jakimś poważnym projekcie przypadkiem takiej gafy nie strzelił :-)

Cytat
Po drugie gdybym wiedział jaki kod w js napisać to bym się tu nie pytał, więc może podasz przykład.
Trochę się tu zmieniło od mojej ostatniej aktywności... Wtedy wymagano samodzielnej "pracy" rolleyes.gif


Kod
<script type="text/javascript">
function sh(){
   var trs = document.getElementsByTagName("tr");
   for(i=0;i<trs.length;i++){
       if(trs[i].className=="h"){
           if(trs[i].style.display=='none') trs[i].style.display='block';
           else trs[i].style.display='none';
       }
   }
}
</script>

Skrypt ogólnie dobry, tylko może się kaszanić w bardziej sztywno-standardowych przeglądarkach. Jeśli chcesz uzyskać ponownie pojawienie się wiersza, należy przywrócić mu poprzednią wartość "display". Ty dałeś "block", a wiersz tabelki nie jest elementem blokowym.

Należy zamienić
='block';
na:

='table-row';
lub
='';

Wybór należy do Ciebie.
Wave
1. Dobrze że sam nie musiałem Ci przypominać o rowspanach. :]
2. Z tego co sam próbowałem napisać puste ciapki nie działały (tylko 'block').
Zajec
Cytat(Wave @ 2005-04-29 17:09:57)
2. Z tego co sam próbowałem napisać puste ciapki nie działały (tylko 'block').

Hm, a jak z 'table-row'? Powinno chyba działać: http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop

Bo teraz imitujesz coś w stylu:

Kod
<table>
<tr>
<td></td>
<td></td>
</tr>
<div>
<td></td>
<td></td>
</div>
</table>
Dex1987
czemu na Mozilli FF po kilku kliknieciach dodaje sie spacja? :/ Jak temu zaradzic?snitch.gif
Zajec
Cytat(Dex1987 @ 2005-06-02 14:12:33)
czemu na Mozilli FF po kilku kliknieciach dodaje sie spacja? :/ Jak temu zaradzic?snitch.gif

Możesz podać adres strory? Choć obawiam się, że może to być kwestia silnika sad.gif
Dex1987
po co Ci adres strony?

  1. <script type="text/javascript">
  2.  
  3. function sh() {
  4.  
  5. var trs = document.getElementsByTagName("tr");
  6.  
  7. for (i=0; i<trs.length; i++) {
  8.  
  9. if (trs[i].className=="h") {
  10.  
  11. if (trs[i].style.display=='none') {
  12.  
  13. trs[i].style.display='block';
  14.  
  15. } else {
  16.  
  17. trs[i].style.display='none';
  18. }
  19. }
  20. }
  21. }
  22.  
  23.  
  24.  
  25. <table border="1" width="190" >
  26. <tr>
  27. <td>1</td>
  28. </tr>
  29. <tr class="h">
  30. <td>aaa</td>
  31. </tr>
  32. <tr class="h">
  33. <td>bbb</td>
  34. </tr>
  35. <tr class="h">
  36. <td>cccc</td>
  37. </tr>
  38. <tr>
  39. <td>2</td>
  40. </tr>
  41. <a href="#" onclick="sh()">but</a>


Otworz przez FF i bedziesz widzial.
Zajec
Cytat(Dex1987 @ 2005-06-02 14:37:26)
po co Ci adres strony?

Otworz przez FF i bedziesz widzial.

Bo niektórym można tłumaczyć nie wiadomo ile, a i tak nie posłuchają.

http://forum.php.pl/index.php?showtopic=29...ndpost&p=171087
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.