Sprawdź najnowsze wpisy:

[jQuery] Częściowe rozwijanie i zwijanie tabeli

By

[jQuery] Częściowe rozwijanie i zwijanie tabeli

W kolejnym tutorialu z serii jQuery zrobimy rozwijaną i zwijaną tabelę. Utrudnieniem będzie to, że będziemy chować i pokazywać tylko część wierszy.

demo | pobierz(.zip)

Do dzieła

Zaczniemy od prostego szablonu dokumentu xHTML, takiego samego jak w [jQuery] Wysuwany boczny panel menu (tam jest opisany kod – jeśli czegoś nie rozumiesz). JavaScript na potrzeby tego tutka, umieścimy w znaczniku <script>. W prawdziwych projektach lepiej umieszczać js w osobnym pliku np. skrypt.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />
	<title>Częściowe rozwijanie i zwijanie tabeli w jQuery</title>
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
	<link rel="stylesheet" href="panel.css" type="text/css" />
 
	<script type="text/javascript">
	<!-- skrypt jQuery -->
	</script>
 
 
	<!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
	<![endif]-->
</head>
<body>
 
 
<!-- treść strony -->
 
</body>
</html>

Teraz dodamy prostą tabelkę i przycisk do jej rozwijania i zwijania.

<table id="zwijana" cellspacing="0" >
	<thead>
		<tr>
			<th>kolumna 1</th><th>kolumna 2</th><th>kolumna 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Wiersz 1</td><td>lorem</td><td>+</td>
		</tr>
		<tr>
			<td>Wiersz 2</td><td>ipsum</td><td>+</td>
		</tr>
		<tr>
			<td>Wiersz 3</td><td>dolor</td><td>-</td>
		</tr>
		<tr>
			<td>Wiersz 4</td><td>sit</td><td>+</td>
		</tr>
		<tr>
			<td>Wiersz 5</td><td>amet</td><td>-</td>
		</tr>
		<tr>
			<td>Wiersz 6</td><td>consectetur</td><td>-</td>
		</tr>
		<tr>
			<td>Wiersz 7</td><td>adipisicing</td><td>+</td>
		</tr>
		<tr>
			<td>Wiersz 8</td><td>elit</td><td>+</td>
		</tr>
		<tr>
			<td>Wiersz 9</td><td>sed</td><td>-</td>
		</tr>
	</tbody>
</table>
 
<p><a href="#" class="przycisk">rozwiń</a></p>

Jak widzisz tabelka nazywa się (id) „zwijana”, posiada 3 kolumny, nagłówek <thead>oraz 9 wierszy w <tbody>. Na samym dole znajduje się „przycisk” (class). Specjalnie użyłem dla niego class nie id, żeby pokazać Ci różnicę w kodzie jQuery.

Potrzebujemy jeszcze trochę stylu dla naszej tabelki. Kod jest tak prosty, że nie ma tu czego omawiać.

#zwijana thead tr {
	background: #ff6600;
	padding: 5px;
}
 
#zwijana thead tr th{
	padding: 5px;
}
 
#zwijana tr{
 
	padding: 5px;
	text-align: center;
}
 
#zwijana tr td{
	border-bottom: 1px solid #ff6600;
	padding: 5px;
}

jQuery

Dotarliśmy do najważniejszego punktu, czyli kodu jQuery. Omówię go linijka po linijce:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(function() {
	var ile = '3'; //ile wierszy pokazać
	$('#zwijana tbody tr:nth-child('+ile+')').nextAll().hide();
 
	$('.przycisk').toggle(function(){
		$('#zwijana tbody tr:nth-child('+ile+')').nextAll().show();
		$(this).text("zwiń");
		return false;
	},
	function(){
		$('#zwijana tbody tr:nth-child('+ile+')').nextAll().hide();
		$(this).text("rozwiń");
		return false;
	});
});

Linia1: Początek jQuery
Linia2: W tej zmiennej zapisujemy ile linii ma być domyślnie otwarte
Linia3: W tabeli „zwijana” zaznaczamy tbody w nim 3 wiersz tr. Następnie wybieramy wszystkie wiersze po nim nextAll() chowamy hide(). W ten sposób ustawiamy domyślny stan tabeli po otwarciu strony.
Linia5: Funkcja toggle dla „przycisk” oznacza, że po jednym kliknięciu wykonuje pierwszą funkcję linie 6-8, a po drugim 11-13, po kolejnym znów 6-8 itd.
Linia6: Robi dokładnie to co linia 3 tylko zamiast chować pokazuje show() wiersze
Linia7: Zmienia w this czyli przycisku który wywołał funkcję tekst na „zwiń”
Linia8: Oznacza, że przeglądarka nie ma przechodzić pod adres z href w klikanym linku

Kolejne linie łatwo rozszyfrujesz samemu, gdyż użyte funkcje zostały już opisane.

I to tyle, nasza tabelka jest gotowa demo. Pliki możesz pobrać tu pobierz(.zip)

Pytania i problemy z działaniem umieszczaj w komentarzach do tego wpisu, w miarę możliwości postaram się pomóc.

Be Sociable, Share!

Zapisz się na newsletter

Nienawidzę spamu tak samo jak Ty, dlatego obiecuję, że nigdy nie sprzedam, ani nie udostępnię nikomu Twojego adresu e-mail.

(W każdej chwili możesz się wypisać, klikając link na końcu każdego maila.)

Tagi: , ,


9 Komentarzy
  1. ggracz (Reply) sobota 19 Wrzesień , 2009

    Witam!
    zrobiłem wszytko zgodnie z tutem… i ogółem wszytko mi ładnie działa… z tym że chce dać więcej niż jedną tabele na stronę… i teraz jak mam te 2 tabele.. to nie ważne w które „rozwiń” klikam to mi rozwija obie te tabele.. a ja chciałbym tak żeby rozwijało tylko jedną, da się tak zrobić?

    • Websta (Reply) niedziela 20 Wrzesień , 2009

      Na początek zmień tabelą id=”zwijana” na class=”zwijana”
      Następnie każdą tabelę i jej przycisk zamknij w osobny div

      <div>
<table class="zwijana" cellspacing="0" >
...
</table>
<p><a href="#" class="przycisk" rel="nofollow">rozwiń</a></p>
</div>
<div>
<table class="zwijana" cellspacing="0" >
...
</table>
<p><a href="#" class="przycisk" rel="nofollow">rozwiń</a></p>
</div>
itd...

      A kod jQuery zmień na:

      $(function() {
	var ile = '3'; //ile wierszy pokazać
	$('.zwijana tbody tr:nth-child('+ile+')').nextAll().hide();
 
	$('.przycisk').toggle(function(){
		$(this).parent().parent().find('.zwijana tbody tr:nth-child('+ile+')').nextAll().show();
		$(this).text("rozwiń");  
		return false;
	},
	function(){	
		$(this).parent().parent().find('.zwijana tbody tr:nth-child('+ile+')').nextAll().hide();
		$(this).text("zwiń");
		return false;
	});
});

      Może mało eleganckie, ale działa.

  2. Artur (Reply) poniedziałek 23 Listopad , 2009

    Witam,
    mogę prosić o pomoc w umieszczeniu tego skryptu w zagnieżdżonej tabeli.
    Jak wstawiam ten skrypt do tabeli w tabeli, to rozwiń przeskakuje mi poza tabele.

    • Websta (Reply) piątek 4 Grudzień , 2009

      Trudno powiedzieć. Strzelam, że to sprawa CSS

  3. Aziz (Reply) środa 2 Grudzień , 2009

    Witam,

    Czy można użyć tego scryptu jQuery z mySQL i PHP tak by widoczna była jedna tabela a każdy rozwijany rząd pobierał i wyświetlał dane z drugiej tabeli?

    • Websta (Reply) piątek 4 Grudzień , 2009

      To jest tylko prosty sposób na to co widać. Jeśli dobrze rozumiem, chodzi Ci o coś zupełnie innego i z użyciem Ajax-a. Ten skrypt robi jedynie prostą operację na HTML w przeglądarce.

  4. Mikołaj (Reply) czwartek 24 Listopad , 2011

    Witam, niestety nie znam java scriptu a chciałbym zamiast zwiń/ rozwiń – obrazki. Czy mogę prosić o rozwiązanie jak się wstawia obrazki w js? zamiast text(” „)

  5. kropek4767 (Reply) niedziela 18 Grudzień , 2011

    Mała modyfikacja dla osób które zamaist tekstu „pokaż/ukryj” chciałby użyć ikonek
    w pliku css

    a.ikonka {
    display: block;
    width : 16px;
    height : 16px;
    float: left;
    margin-left: 8px;
    background-repeat : no-repeat;
    background-position : center;
    }
    a.pokaz { background-image : url('../grafika/add.png'); }
    a.ukryj { background-image : url('../grafika/delete.png'); }

    przycisk „pokaż/ukryj”



    a kod JQurey zmieniamy na

    $(function() {
    var ile = '3'; //ile wierszy pokazać
    $('.pokaz-ukryj-wiersze tbody tr:nth-child('+ile+')').nextAll().hide();

    $('.przycisk').toggle(function(){
    $(this).parent().parent().find('.pokaz-ukryj-wiersze tbody tr:nth-child('+ile+')').nextAll().show();
    $(this).removeClass("pokaz noClass").addClass("ukryj");
    return false;
    },
    function(){
    $(this).parent().parent().find('.pokaz-ukryj-wiersze tbody tr:nth-child('+ile+')').nextAll().hide();
    $(this).removeClass("ukryj noClass").addClass("pokaz");;
    return false;
    });
    });

    • kropek4767 (Reply) niedziela 18 Grudzień , 2011

      z jakiegoś powodu nie dodało kodu odnośnika