Witam.
Stworzyłem tabelkę z kategoriami i przyciskiem po naciśnięciu którego pokazują się nazwy należące do danej kategorii. Jako, ze jestem kompletnie początkujący w kwestii JS chciałbym poprosić o pomoc. Co ciekawe statyczną tabelkę (bez chowanych elementów) udało mi się zrobić (za pomocą znaczników tabel (dane pobierane są z MYSQLa). Treść pytania nie ma znaczenia. Generalnie chodzi o to, żeby w tytułach była nazwa kategorii, a pod nim już same elementy do wybierania).
  1. echo "<table class=\"lab\" id=\"rez\">";
  2. $ile_w_kat=max(array(count($id_bad2)));
  3. $ile=($ile_w_kat);
  4. echo "<tr><td witdh=\"100%\" colspan=12 style=\" border 1 px\" bgcolor=\"#426B9C\">$kat_bad";
  5. for($y=0;$y<$ile_w_kat;$y++){
  6. if($y%6==0){
  7. echo "<tr><td><input type=\"checkbox\" name=\"id_bad[]\" value=\"$id_bad2[$y]\"</td><td>$badanie2[$y]</td>";
  8. }else{
  9. echo "<td><input type=\"checkbox\" name=\"id_bad[]\" value=\"$id_bad2[$y]\"</td><td>$badanie2[$y]</td>";
  10. }
  11. }
  12. }

Z tą tabelą nie mam problemów. Próbowałem ją przepisać tak, zeby informacje były wyświetlane w DIVACH. Kod wygląda w sposób następujący. Omijam wszelkie nieznaczące dla rozmieszczenia na stronie części kodu.
  1. "<style type=\"text/css\">
  2. div {
  3. border: 1px solid black;
  4. margin: 0;
  5. padding: 2px;
  6. width: 100%;
  7. vertical-align: center;
  8. }
  9. div.linia {
  10. display: table-row;
  11. position: inherit;
  12. width: 100%;
  13. }
  14. div.komorka {
  15. display: table-cell;
  16. width: 20%;
  17. }
  18. body,input
  19. {
  20. font-family:\"Trebuchet ms\",arial;font-size:0.9em;
  21. color:#333;
  22. }
  23. .spoiler
  24. {
  25. border:1px solid #ddd;
  26. padding:3px;
  27. background-color:#b0c4de;
  28. }
  29. .spoiler .inner
  30. {
  31. border:1px solid #eee;
  32. padding:3px;margin:0px;
  33. }
  34. </style>
  35. <script type=\"text/javascript\">
  36. function showSpoiler(obj)
  37. {
  38. var inner = obj.parentNode.getElementsByTagName(\"div\")[0];
  39. if (inner.style.display == \"none\")
  40. inner.style.display = \"\";
  41. else
  42. inner.style.display = \"none\";
  43. }
  44. </script>";

Ta część wiadomo js. Podejrzewam, że błąd tkwi gdzieś tutaj, którego nie widzę. Sam skrypt wyświetlający jest zrobiony analogicznie jak poprzedni w "htmlowej" tabeli.
  1. echo "<div class=\"spoiler\">$kat_bad<br/><input type=\"button\" onclick=\"showSpoiler(this);\"
  2. value=\"Lista badań: Pokaz / Ukryj\"/>";
  3. $ile_w_kat=max(array(count($id_bad2)));
  4. echo "<div class=\"inner\" style=\"display:none;\">";
  5. for($y=0;$y<$ile_w_kat;$y++){
  6. if($y%6==0){
  7. echo "<div class=\"linia\"><div class=\"komorka\">
  8. <input type=\"checkbox\" name=\"id_bad[]\" value=\"$id_bad2[$y]\">$badanie2[$y]</div>";
  9. }else{
  10. echo "<div class=\"komorka\">
  11. <input type=\"checkbox\" name=\"id_bad[]\" value=\"$id_bad2[$y]\">$badanie2[$y]";
  12. }echo "</div>";
  13. }echo "</div></div>";
  14. }

Niestety wyświetla mi się wszystko błędnie. Ładnie pokazuje mi nazwy kategorii, ale błędnie wyświetla to co ma się pokazywać po naciśnięciu buttona. W jednym wierszu jest jedna komórka, a w następnym pięć. Chyba, ze kategoria ma mniej niż 5 elementów wówczas pokazuje się ich odpowiednio mniej. Dodatkowo komórki nie wypełniają całej szerokości strony.
Z góry dziękuję za pomoc.