Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][HTML][jQuery] Rozwijalna tabela, Pomoc z jQuery potrzebna
Xart Irok
post 19.08.2011, 15:43:02
Post #1





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 18.08.2011
Skąd: Radom

Ostrzeżenie: (0%)
-----

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.
[HTML] pobierz, plaintext 
  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. <head>
  4. <title>Strona z nieuporządkowaną listą</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  6.  
  7. <style type="text/css">
  8. #zawartosc {
  9.     display:none;
  10. }
  11.  
  12. </style>
  13.  
  14. <!-- dodanie jQuery do dokumentu -->
  15. <script src="http://code.jquery.com/jquery-latest.js"></script>
  16.  
  17. <!-- Nasz kod java script: -->
  18.  
  19. <script type="text/javascript">
  20. $(document).ready(function () {
  21.     $('#kategoria').click(function () {
  22.     $('#zawartosc').slideToggle('medium');
  23.     });
  24. });
  25. </script>
  26.  
  27. </head>
  28.  
  29.  
  30. <table border="1" width="100%">
  31. 	<tbody id="kategoria">
  32. 		<tr>
  33. 			<td colspan="3">Click Me</td>
  34. 		</tr>
  35. 	</tbody>
  36. 	<tbody id="zawartosc">
  37. 		<tr>
  38. 			<td>&nbsp;</td>
  39. 			<td>&nbsp;</td>
  40. 			<td>&nbsp;</td>
  41. 		</tr>
  42. 		<tr>
  43. 			<td>&nbsp;</td>
  44. 			<td>&nbsp;</td>
  45. 			<td>&nbsp;</td>
  46. 		</tr>
  47. 	</tbody>
  48. </table>
  49. <br>
  50. <table border="1" width="100%">
  51. 	<tbody id="kategoria">
  52. 		<tr>
  53. 			<td colspan="3">Click Me</td>
  54. 		</tr>
  55. 	</tbody>
  56. 	<tbody id="zawartosc">
  57. 		<tr>
  58. 			<td>&nbsp;</td>
  59. 			<td>&nbsp;</td>
  60. 			<td>&nbsp;</td>
  61. 		</tr>
  62. 		<tr>
  63. 			<td>&nbsp;</td>
  64. 			<td>&nbsp;</td>
  65. 			<td>&nbsp;</td>
  66. 		</tr>
  67. 	</tbody>
  68. </table>
  69. <br>
  70. <table border="1" width="100%">
  71. 	<tbody id="kategoria">
  72. 		<tr>
  73. 			<td colspan="3">Click Me</td>
  74. 		</tr>
  75. 	</tbody>
  76. 	<tbody id="zawartosc">
  77. 		<tr>
  78. 			<td>&nbsp;</td>
  79. 			<td>&nbsp;</td>
  80. 			<td>&nbsp;</td>
  81. 		</tr>
  82. 		<tr>
  83. 			<td>&nbsp;</td>
  84. 			<td>&nbsp;</td>
  85. 			<td>&nbsp;</td>
  86. 		</tr>
  87. 	</tbody>
  88. </table>
  89.  
  90. </body>
  91. </html>
[HTML] pobierz, plaintext

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.


--------------------
Pozdrawiam
Xart
Go to the top of the page
+Quote Post
mortus
post 19.08.2011, 16:39:43
Post #2





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

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:
[HTML] pobierz, plaintext 
  1. <table >
  2.  <thead class="kategoria">
  3.   <tr><th colspan="3">kategoria</th></tr>
  4.  </thead>
  5.  <tbody class="zawartosc">
  6.   <tr>
  7.    <td>1</td><td>4</td><td>7</td>
  8.   </tr>
  9.   <tr>
  10.    <td>2</td><td>5</td><td>8</td>
  11.   </tr>
  12.   <tr>
  13.    <td>3</td><td>6</td><td>9</td>
  14.   </tr>
  15.  </tbody>
  16. </table>
[HTML] pobierz, plaintext

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
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 13.06.2025 - 01:22
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn