chevron-left chevron-right

[jQuery]Efektowne zarządzanie tabelami za pomocą jQuery

Tabele w formularzach bardzo często przyjmują formę sztywnego szkieletu, który dość trudno zwiększyć o kolejne wiersze, które są potrzebne do wpisania dodatkowych, potrzebnych informacji. Po przeczytaniu tego artykułu dowiesz się jak tworzyć dynamiczne, edytowalne tabele za pomocą jQuery.

Tabela w HTML

Na początek jak zwykle musimy przygotować odpowiednią strukturę HTML, która będzie naszą edytowalną tabelą:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<p><a href="#" id="dodajWiersz" class="add button">Dodaj nowy wiersz</a></p>
<table id="tabela">
	<thead>
		<tr>
			<th>Lp.</th>
			<th>Nazwa</th>
			<th>Typ</th>
			<th>Akcje</th>
		</tr>
	</thead>
	<tbody>
		<tr id="wiersz-1">
			<td>1</td>
			<td>Pozycja 1</td>
			<td>Typ 1</td>
			<td><a class="delete button" href="#">Usuń wiersz</a></td>
		</tr>
		<tr id="wiersz-2">
			<td>2</td>
			<td>Pozycja 2</td>
			<td>Typ 2</td>
			<td><a class="delete button" href="#">Usuń wiersz</a></td>
		</tr>
	</tbody>
</table>
Jak widać tabela w każdym wierszu zawiera 4 komórki, a w ostatniej z nich znajduje się przycisk, któremu przypiszemy akcję usuwania wiersza. Ponad tabelą będzie się znajdował przycisk, któremu przypiszemy akcję dodawania nowego wiersza do istniejącej tabeli.

Magia interakcji z tabelą za pomocą JS

Cele jakie musi osiągnąć nasz skrypt obsługujący tabelę to:

  • dodawanie/odejmowanie wierszy do/z tabeli
  • uzyskanie miłej dla oka animacji dodawania i usuwania wiersza
  • automatyczne przeliczanie numerów wierszy w tabeli
Mając tak zdefiniowane cele możemy przystapić do tworzenia skryptu JS wykorzystującego możliwości bibliotek jQuery oraz jQuery UI. Należy je dodać do sekcji >HEAD< naszej strony internetowej:
1
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
Kod, który odpowiada za nowe funkcjonalności tabeli wygląda następująco:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$(document).ready(function() {
    //funkcja odczytująca kliknięcie w element o id: dodajWiersz
    //i wykonująca akcję dodawania nowego wiersza do tabeli
    $('#dodajWiersz').click(function() {
 
        //policz ile jest wierszy w tabeli
        var liczba = $('#tabela tr').length;
 
        //pierwsza komórka
        var f1  = '<td><input type="text" class="medium" name="pozycja[]"/></td>';
 
        //druga komórka
        var f2  = '<td><input type="text" class="medium" name="typ[]"/></td>';
 
        //trzecia komórka
        var f3  = '<td><a class="button delete" href="#">Usuń wiersz</a></td>';
 
        //w tej zmiennej definiujemy nowy wiersz w tabeli
        var row = '<tr class="none" id="wiersz-'+liczba+'"><td>'+liczba+'</td>'+f1+f2+f3+'</tr>';
 
        //dołącz nowy wiersz na końcu tabeli
        $('#tabela').find('tbody').append(row);
 
        //usuwamy klasę: none z wiersza oraz animujemy efekt dodawania wiersza
        $('tr.none').removeClass('none').animate({'backgroundColor':'#66B04D','color':'#fff'},300,function(){
           $(this).animate({'backgroundColor':'#fff','color':'#000'},300);
        });
    });
 
    //funkcja odczytująca kliknięcie w element o klasie: delete
    //i wykonująca akcję usuwania danego wiersza z tabeli
    //oraz dokonuje przeliczenia numerów wierszy w tabeli
    $('.delete').live('click',function() {
        //znajdź najbliższy wiersz będący elementem nadrzędnym dla linka usuwającego ten wiersz
        //i wykonaj animację
        $(this).closest('tr').animate({'backgroundColor':'#EF3E23','color':'#fff'},300,function(){
 
            //usuń dany wiersz
            $(this).remove();
 
            //aktualizuj numery pozostałych wierszy
            //dzięki temu gdy usuniemy wiersz w środku tabeli 
            //to nie będzie istniała dziura w numeracji wierszy
            $('#tabela > tbody > tr').each(function(i) {
                //wpisz nowy numer wewnątrz pierwszej komórki danego wiersza
                $(this).find('td:first-child').text(i+1);
            });
        });
    });
});
W powyższym kodzie powstawiałem komentarze, dzięki czemu wszystko powinno być jasne dla każdego webmastera (mam nadzieję). Należy zwrócić uwagę na to, że dla tak dynamicznie tworzonej tabeli akcja usuwania wierszy została przypisana do metody live(), która rozpoznaje zmienioną strukturę DOM strony internetowej. Bez tej metody nie byłoby możliwe usuwanie nowo utworzonych wierszy i skrypt usuwałby wiersze, które powstały podczas ładowania się strony.

Zarządzanie tabelą - podsumowanie

Tak skonstruowany powyższy kod strony w HTML i skryptu w JS zapewni Ci odpowiednią funkcjonalność, którą możesz wykorzystać w swoim projekcie. Na pewno znajdzie się ktoś, komu zaproponowane przeze mnie definiowanie treści komórek nie przypadnie do gustu. W takiej sytuacji prosiłbym o podzielenie się swoim skrawkiem kodu rozwiązującym nieco ładniej tą kwestię.
Do tak napisanego kodu wystarczy dopisać odpowiedni kod w PHP lub w innym języku, który będzie dane wpisane do takiej tabeli zapisywał do bazy danych i będzie można się cieszyć pełną funkcjonalnością takiego rozwiązania zarówno ze strony "frontendowej" jak i "backendowej".

Demo z tego artykułu można zobaczyć tutaj: dodawanie i usuwanie wierszy z tabeli za pomocą jQuery.

  • Comandeer

    Skrypt działa bardzo dobrze, ale są 2 rzeczy, które można poprawić:
    1) skrypty powinno się includować na końcu >bodyhead< (i w tym momencie można się pozbyć $(document).ready())
    2) dla osób, które nie mają włączonego JS, linki dodawania/usuwania nie powinny się pojawiać. Powinny być dodane dopiero przez JS. I raczej powinny mieć e.preventDefault 😉

  • Piotr Nalepa

    ad. 1). na końcu i owszem, ale wtedy gdy potrzebna nam optymalizacja szybkości ladowania się strony. Potrzeby tego dema nie obejmowały optymalizacji szybkości ładowania się strony.
    ad. 2). masz rację, należałoby zastosować ta metodę

  • Tomek

    Bardzo ciekawy artykuł! Wszystko dobrze wytłumaczone.
    Mam propozycję, mianowicie myślę że warto korzystać przy tego typu wpisach z narzędzia http://jsfiddle.net/ 
    Link przykładu z wpisu: http://jsfiddle.net/zielin/kvjjV/

  • Piotr Nalepa

    to narzędzie jest dobre, ale raczej do wykorzystywania na forach internetowych
    preferuję pozostawianie swojego kodu na swojej domenie 😉

  • Konrad

    Witam
    Jestem ciekaw czy można tak przerobić tą funkcję by zapamiętywało wpisane wiersze oraz żeby można było je modyfikować

  • Piotr Nalepa

    oczywiście, że można. Wystarczy skorzystać odpowiednich metod biblioteki jQuery, które obsługują zapytania AJAX oraz przygotować pliki operujące danymi po stronie serwera i bazę danych

  • Marek

    działa, ale nie aktualizuje nazwy id dla tr, przez co w niektorych przypadkach (np. przy dodaniu kilku wierszy, potem usunieciu i potem znow dodaniu) powstaja elementy tr o takich samych nazwach id, co jest niedopuszczalne i uniemozliwia uzycie w skryptach. ale ogolnie bardzo fajny artykul :).