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.