Forum PHP.pl > [JavaScript][HTML][jQuery] Rozwijalna tabela

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][HTML][jQuery] Rozwijalna tabela

Xart Irok

19.08.2011, 15:43:02

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 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>Strona z nieuporządkowaną listą</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
 
<style type="text/css">
#zawartosc {
    display:none;
}
 
</style>
 
<!-- dodanie jQuery do dokumentu -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<!-- Nasz kod java script: -->
 
<script type="text/javascript">
$(document).ready(function () {
    $('#kategoria').click(function () {
    $('#zawartosc').slideToggle('medium');
    });
});
</script>
 
</head>
 
 
<table border="1" width="100%">
	<tbody id="kategoria">
		<tr>
			<td colspan="3">Click Me</td>
		</tr>
	</tbody>
	<tbody id="zawartosc">
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>
<br>
<table border="1" width="100%">
	<tbody id="kategoria">
		<tr>
			<td colspan="3">Click Me</td>
		</tr>
	</tbody>
	<tbody id="zawartosc">
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>
<br>
<table border="1" width="100%">
	<tbody id="kategoria">
		<tr>
			<td colspan="3">Click Me</td>
		</tr>
	</tbody>
	<tbody id="zawartosc">
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>
 
</body>
</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.

mortus

19.08.2011, 16:39:43

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 
<table >
 <thead class="kategoria">
  <tr><th colspan="3">kategoria</th></tr>
 </thead>
 <tbody class="zawartosc">
  <tr>
   <td>1</td><td>4</td><td>7</td>
  </tr>
  <tr>
   <td>2</td><td>5</td><td>8</td>
  </tr>
  <tr>
   <td>3</td><td>6</td><td>9</td>
  </tr>
 </tbody>
</table>
[HTML] pobierz, plaintext

Wtedy problem można rozwiązać w czterech linijkach (modyfikując przykład, który podałeś):

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function () {
 $("thead.kategoria").click(function(){
  $(this).next("tbody").show("fast");
  $("thead.kategoria").not(this).next("tbody:visible").hide("fast");
 });
});
[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.