Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery]To samo ID
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
piotrooo89
mam taką tabelke:

  1. <tr><th>tytul</th></tr>
  2. <tr>
  3. <td>text</td>
  4. <td>text</td>
  5. <td>text</td>
  6. </tr>
  7. <tr><th>tytul2</th></tr>
  8. <tr>
  9. <td>text2</td>
  10. <td>text2</td>
  11. <td>text2</td>
  12. </tr>


i teraz chciałbym zapytać jak zrobić ze id thead i tbody jest równe, tzn. mam pierwsze thead które ma id 1 tbody które ma również id 1 kolejne thead ma id 2 i tbody kolejne ma id 2 itd. ponieważ korzystam z skryptu (http://mediaformations.com/accordion-tables-with-jquery/) ukrywającego wiersze ukrywa mi wszystkie wiersze które mam mam w tbody a ja chce tylko jedna grupę. no i jeszcze jedno jak domyślnie zrobić aby były te wiersze zwinięte, tzn po załadowaniu pokazuje tylko nagłówki.
askone
Hej

Wydaje mi się, iż błedem jest definiowanie w ramach jednej tabeli kilku sekcji <thead>. Zgodnie z dokumentacją w tabeli może być 1 lub wiele elementów <tbody>, ale nie ma mowy o sekcjach <thead> i <tfoot>. Według mnie w jednej tabeli może być tylko jeden <thead> i jeden <tfoot>...
piotrooo89
wiedziałem ze ktoś z czymś takim wyjedzie smile.gif kurcze zadałem oczywisty problem, nie zapytałem czy to co napisałem jest zgodne ze standardami tylko jak zrobić ukrywanie. @fly474 zaznajomiony jestem z tymi rzeczami, jednak mam tutaj zupełnie iny problem smile.gif
wookieb
Nie możesz mieć w dokumencie dwóch elementów o tym samym id. Jak już to lepiej powrzucać tabel w divy i tak robić accordion. Druga opcja to użycie klas.
thek
Mi się widzi, że lepiej byłoby to samemu w JS napisać i w zdarzeniu onclick dla thead, zmieniać display tbody odpowiedniego. Problemem pewnym może być wybranie elementu do ukrycia. Zrezygnowałbym więc z nadawania id sekcji thead tabel i zostawiłbym ją jedynie dla tbody. Domyślnie wtedy mógłbym stronę uruchamiać z display wyłączonym we wszystkich tbody i dopiero kliknięcie na odpowiednim thead wyświetliło by mi odpowiedni. A napisanie funkcji w stylu displaying(tbodyId) zmieniającą style dla nich to dla Ciebie zapewne prościzna. Myślę, że w większości przypadków najprostsze rozwiązania są najlepsze.

EDIT: bym zapomniał, o użyciu JQuery by efekt animacji był smile.gif
piotrooo89
może macie racje ze lepiej to zrobić w czystym JS. ale jako że jestem człowiekiem dociekliwym będę pytał dalej,

jeśli na sztywno wpisze id:

  1. $(this) .parents('table.list') .children('tbody#0') .toggle();


to chowa się tylko jedna grupa czyli tak jak ma być.

jak teraz przypisać id klikniętego th?

  1. $(document).ready(function(){
  2.  
  3. $('table.list th') .click(
  4. function() {
  5. $(this) .parents('table.list') .children('tbody#'+$(this).attr('id')) .toggle();
  6. }
  7. )
  8. });

robię to tak no i nie bardzo chce zadziałać. co jest nie tak?

ok już mam znalazłem błąd... dopisywałem to do thead a nie do th...
seth-kk
pewnie lepiej byloby podazac wskazowkami wookieb ale jesli bedziesz sie parentowal do do <thead /> zamiast <table /> i uzyjesz next() to tez powinno dzialac

//update
ups - dopiero teraz zaowazylem update piotrooo89
erix
Cytat
ukrywającego wiersze ukrywa mi wszystkie wiersze które mam mam w tbody a ja chce tylko jedna grupę. no i jeszcze jedno jak domyślnie zrobić aby były te wiersze zwinięte, tzn po załadowaniu pokazuje tylko nagłówki.

Możesz całkiem wywalić te identyfikatory, nawet tak będzie lepiej.

W jQuery jest funkcja/selektor eq(), to jej potrzebujesz. winksmiley.jpg

A jeśli potrzebujesz konkretnego offsetu dynamicznie - index() i zwraca ona numer względem kolekcji zapisanej wcześniej w wybranej zmiennej.
piotrooo89
mam teraz taki problem, chciałbym aby ta tabela była odporna na odświeżania, tzn rozwinąłem np 2 grupy i kliknąłem na link co zrobić aby mi się ona nie chowała?

tabelka wygląda tak:

  1.  
  2. <thead><tr><th style="cursor:pointer" id="1" colspan="2">Grupa 1</th></tr></thead>
  3. <tbody style="display: none;" id="1"><tr><td width="80%">Do gr 1</td><td><a href="?id_user=1">nadaj</a></td></tr></tbody>
  4. <tbody style="display: none;" id="1"><tr><td width="80%">Do gr 1</td><td><a href="?id_user=2">nadaj</a></td></tr></tbody>
  5.  
  6. <thead><tr><th style="cursor:pointer" id="2" colspan="2">Grupa 2</th></tr></thead>
  7. <tbody style="display: none;" id="2"><tr><td width="80%">Do gr 2</td><td><a href="?id_user=3">nadaj</a></td></tr></tbody>
  8. <tbody style="display: none;" id="2"><tr><td width="80%">Do gr 2</td><td><a href="?id_user=4">nadaj</a></td></tr></tbody>
  9.  


i teraz jak kliknę nadaj i mam rozwinięte obie grupy to nieche aby one się chowały. chciałbym uniknąć korzystania a AJAX'a.
askone
Może $_Session lub $Cookies winksmiley.jpg
piotrooo89
a jakieś jeszcze pomysły? smile.gif
seth-kk
deep linking lub rozwijac w php na podstawie URLa
btw dlaczego oddzielne <tbody /> dla kazdego <tr />?
btw2 id powinno zaczynac sie od litery
skoro id 'musza' sie powtarzac to dlaczego nie zastapisz ich klasami?
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.