W kolejnym tutorialu z serii jQuery zrobimy rozwijaną i zwijaną tabelę. Utrudnieniem będzie to, że będziemy chować i pokazywać tylko część wierszy.
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.

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ć?
Na początek zmień tabelą id=”zwijana” na class=”zwijana”
Następnie każdą tabelę i jej przycisk zamknij w osobny div
A kod jQuery zmień na:
Może mało eleganckie, ale działa.
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.
Trudno powiedzieć. Strzelam, że to sprawa CSS
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?
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.
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(” „)
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;
});
});
z jakiegoś powodu nie dodało kodu odnośnika