Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML][jQuery] Rozwijalna tabela
Forum PHP.pl > Forum > Przedszkole
Xart Irok
Chciałem lekkiej pomocy z tym bajerem, bo już szukałem rozwiązań nawet trochę starałem się pomieszać opcje, ale względu że nie znam języka jest ciężko mi to zrobić. Przejdę do konsensus tej wypowiedzi poniżej jest kod który sam na razie wyskrobałem.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
  3. <title>Strona z nieuporządkowaną listą</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  5.  
  6. <style type="text/css">
  7. #zawartosc {
  8. display:none;
  9. }
  10.  
  11.  
  12. <!-- dodanie jQuery do dokumentu -->
  13. <script src="http://code.jquery.com/jquery-latest.js"></script>
  14.  
  15. <!-- Nasz kod java script: -->
  16.  
  17. <script type="text/javascript">
  18. $(document).ready(function () {
  19. $('#kategoria').click(function () {
  20. $('#zawartosc').slideToggle('medium');
  21. });
  22. });
  23.  
  24. </head>
  25.  
  26.  
  27. <table border="1" width="100%">
  28. <tbody id="kategoria">
  29. <tr>
  30. <td colspan="3">Click Me</td>
  31. </tr>
  32. </tbody>
  33. <tbody id="zawartosc">
  34. <tr>
  35. <td>&nbsp;</td>
  36. <td>&nbsp;</td>
  37. <td>&nbsp;</td>
  38. </tr>
  39. <tr>
  40. <td>&nbsp;</td>
  41. <td>&nbsp;</td>
  42. <td>&nbsp;</td>
  43. </tr>
  44. </tbody>
  45. <br>
  46. <table border="1" width="100%">
  47. <tbody id="kategoria">
  48. <tr>
  49. <td colspan="3">Click Me</td>
  50. </tr>
  51. </tbody>
  52. <tbody id="zawartosc">
  53. <tr>
  54. <td>&nbsp;</td>
  55. <td>&nbsp;</td>
  56. <td>&nbsp;</td>
  57. </tr>
  58. <tr>
  59. <td>&nbsp;</td>
  60. <td>&nbsp;</td>
  61. <td>&nbsp;</td>
  62. </tr>
  63. </tbody>
  64. <br>
  65. <table border="1" width="100%">
  66. <tbody id="kategoria">
  67. <tr>
  68. <td colspan="3">Click Me</td>
  69. </tr>
  70. </tbody>
  71. <tbody id="zawartosc">
  72. <tr>
  73. <td>&nbsp;</td>
  74. <td>&nbsp;</td>
  75. <td>&nbsp;</td>
  76. </tr>
  77. <tr>
  78. <td>&nbsp;</td>
  79. <td>&nbsp;</td>
  80. <td>&nbsp;</td>
  81. </tr>
  82. </tbody>
  83.  
  84. </body>
  85. </html>

Proszę jakiegoś bardziej ogarniętego człowieka o pomoc z jQuery...

A więc chciał bym uzyskać przy moich tabelach taki efekt.
Moja praca zaczęła się na tym skrypcie, a zakończyła się na tym.

A słowami będzie to tak jeśli kliknę na pierwsza kategorie (rozwinie się), a potem kiedy kliknę na druga kategorie (rozwinie się, zaś pierwsza ma się zwinąć), tak samo miało by się dziać z trzecia i tak w kółko.

Z góry dziękuje za pomoc.
mortus
Przede wszystkim zapamiętaj, że w dokumencie (X)HTML możesz mieć tylko jeden element o konkretnym identyfikatorze (id). Jeśli chcesz nadać kilku elementom taką samą cechę to musisz posłużyć się klasą (class). Poza tym masz nieprawidłowo zbudowaną tabelę, bo w jednej tabeli nie możesz mieć dwóch "ciał" (<tbody>). Prawidłowo zbudowana tabela powinna wyglądać zatem tak:
  1. <thead class="kategoria">
  2. <tr><th colspan="3">kategoria</th></tr>
  3. </thead>
  4. <tbody class="zawartosc">
  5. <tr>
  6. <td>1</td><td>4</td><td>7</td>
  7. </tr>
  8. <tr>
  9. <td>2</td><td>5</td><td>8</td>
  10. </tr>
  11. <tr>
  12. <td>3</td><td>6</td><td>9</td>
  13. </tr>
  14. </tbody>

Wtedy problem można rozwiązać w czterech linijkach (modyfikując przykład, który podałeś):
[JAVASCRIPT] pobierz, plaintext
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. $("thead.kategoria").click(function(){
  4. $(this).next("tbody").show("fast");
  5. $("thead.kategoria").not(this).next("tbody:visible").hide("fast");
  6. });
  7. });
[JAVASCRIPT] pobierz, plaintext
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.