JavaScript: Sortowanie tabeli po kolumnach cz. 1
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
Rozpoczynamy kolejny ciekawy projekt, w którym wykorzystamy wiele różnych technik pracy z kodem JavaScript
i również z obiektowym modelem dokumentu.
Dlatego chciałbym, abyś pracował razem ze mną.
Jeżeli będziesz tylko oglądał, to wielu rzeczy możesz nie zrozumieć, a jeżeli będziesz robił krok po kroku
ze mną, zapauzuj sobie to wideo wtedy, kiedy potrzebujesz.
Rób powoli, bo wszystko zrozumiesz i gwarantuję ci, że po tej lekcji bardzo wiele się nauczysz.
Naszym celem będzie stworzenie możliwości sortowania tabeli po kolumnach, co często możesz spotkać w
różnych aplikacjach internetowych.
Mianowicie będę chciał móc kliknąć tutaj na imię i chciałbym, żeby cała ta tabela, czyli wszystkie te
wiersze zostały posortowane poprzez imię.
Jeżeli kliknę na nazwisko to tak samo,
jeżeli kliknę na wiek, to również. Ja w tym kursie pokazywałem ci, jak sortować tablicę i będziemy z części
z tych rzeczy korzystać. Natomiast ten projekt jest bardziej skomplikowany, niż projekt, który robiliśmy w lekcji
poprzedniej.
Dlatego chciałbym, abyś bardzo uważnie go śledził i pracował razem ze mną.
Przejdziemy sobie od razu do kodu, pokażę ci jeszcze HTML. Mam nadzieję, że wiesz jak się tworzy tabele.
Mamy tabelę i mamy taki element jak thead.
Następnie tr, a tr, jest to po prostu, po prostu cały wiersz i mamy w nim poszczególne elementy td.
Jeden, drugi oraz trzeci.
Tak się tworzy tabelki.
Natomiast to jest w thead, czyli tutaj u góry.
Następnie mamy tbody i tutaj mamy znowu tr'ki i każda z takich tr'ek jest to jeden wiersz i mamy Jan
Kowalski 33, czyli Jan Kowalski 33 i kolejne tr a w nim elementy td, po jest ważne, abyś to rozumiał,
w jaki sposób tabele są tworzone w kodzie HTML.
No i teraz taką tabelę pobrałem tutaj od razu do zmiennej table.
Mamy ją tutaj. Następnie ths, tak nazwałem zmienną. Pobrałem wszystkie th, które znajdują się tutaj
w thead.
Z tego powodu, że na nie będziemy chcieli klikać, więc są nam one potrzebne.
Następnie trs.
Pobrałem sobie wszystkie elementy tr, czyli wiersze.
Ale co ważne, które znajdują się w tbody, bo nie chcemy sortować tych, które znajdują się w thead. Tutaj
jest jeden tr, tego nie chcemy.
Dlatego napisem tbody, tr i wszystkie te tr'ki zostaną nam tutaj zapisane i teraz będziemy chcieli do
ths, czyli do tych właśnie komórek przypisać zdarzenie kliknięcia, a więc po kliknięciu na to, na to lub
na to, będziemy chcieli wywołać funkcję, którą nazwę sortBy, więc może taką funkcję sobie tutaj napiszmy,
na razie ona będzie pusta.
W ten sposób, no i teraz w jaki sposób możemy przypisać do wszystkich ths takie zdarzenia.
Już Ci to pokazywałam w tym kursie, musimy skorzystać z pętli, czyli przeiterujemy po wszystkich tych elementach,
bo jest to obiekt tablicopodobny, więc możemy na nim iterować i ths, i to będzie najpierw pierwszy element,
czyli ten, potem drugi potem trzeci i odwołamy się do onclick.
Tutaj również mógłbyś napisać addEventListener.
Ale możemy również click i przypisujemy funkcję sortBy.
Czyli teraz, jeśli sobie tutaj wpiszemy console.log sortuje, to po kliknięciu na każdy z tych elementów powinniśmy
to w konsoli zobaczyć u dołu.
Sortuje, sortuje, sortuje trzykrotnie, a więc na razie wszystko jest OK.
Teraz zaczynają się schody i będę starał się powoli wszystko wytłumaczyć.
Otóż po kliknięciu na imię, nazwisko lub wiek, chciałbym wiedzieć, który indeks kliknąłem tzn.
czy kliknęliśmy pierwszy element, drugi czy trzeci. Jeżelibyśmy sobie ths wyświetli, w ten sposób, console.log
ths, czyli te na które klikamy, to one są tutaj w tabeli.
Jak widzisz, ale że nie mamy tutaj prawdziwej tablicy, tylko jest to obiekt tablicopodobny, to nie możemy
sprawdzić poprzez indexOf, gdzie dany element się znajduje, zaraz ci też pokaże.
Natomiast ja właśnie po kliknięciu np. na nazwisko, chciałbym wiedzieć czy kliknąłem drugi element, po
to, abym wiedział czy później w tych wierszach sortować po drugim elemencie.
Bo zauważ, jak to jest odzwierciedlone w tabeli. Mamy thead
i tu są trzy th
i dokładnie tak samo będzie tutaj później w tr, również są trzy.
Czyli jeżeli klikniemy na środkowy, nazwisko, to będziemy wiedzieć, że chcemy po środkowym również sortować.
Jak możemy to sprawdzić?
Najpierw będę chciał tutaj, w funkcji sortBy przechwycić event, bo skoro ją tutaj przepisaliśmy to będziemy
mieli event i będziemy chcieli sobie ten event zapisać, stworzę zmienną,
może target, bo chciałbym się odwołać do target.
W ten sposób i teraz zrobimy jego console.log. Będziemy to robić krok po kroku, abyś załapał, o co chodzi.
Przejdźmy raz jeszcze do konsoli.
Klikam na nazwisko i target to jest th nazwisko i teraz gdybyśmy mogli sprawdzić w tej tablicy, w tym obiekcie
tablicopodobnym, pod którym indeksem znajduje się th, to wszystko byłoby OK, ale na tablicy mamy taką
metodę, którą w poprzedniej lekcji Ci pokazałem również jak indexOf,
ale na takim, właśnie,
obiekcie tablicopodobnym jej nie ma.
No i teraz pojawia się pierwszy problem.
Otóż właśnie te ths, chcielibyśmy zamienić na tablicę.
Ja może ci to jeszcze pokażę, abyś miał pewność, ths.indexOf.
Zobaczymy.
Po kliknięciu mamy undefined.
Czyli nie ma czegoś takiego na tej niby tablicy, jak indexOf.
Gdyby było, to wiemy że np. e.target to było to th, przekazałbym je tutaj, jako target i zostałoby mi zwrócone
0, 1 albo 2.
Mam nadzieję, że na razie nadążasz.
Więc musimy znaleźć sposób na to, jak ten obiekt tablicopodobny zamienić na prawdziwą tablicę.
I na to sposobów jest wiele.
Jest jeden bardzo prosty, ale wymaga zrozumienia nieco programowania obiektowego i funkcji call, którą
pokazuje w drugiej części tego kursu, więc na razie to sobie darujemy i zrobimy to za pomocą funkcji, którą
teraz napiszemy.
Funkcja nazwiemy make a LayArray. Ona będzie bardzo prosta, więc się nie przejmuj, będzie przyjmować właśnie
taki obiekt tablicopodobny, czyli to się nazywa na nodeList.
Dowolnie możemy to nazwać, ale nazwiemy to nodeList.
Wiesz, że po takim obiekcie można iterować, bo dokładnie to zrobiliśmy w tym miejscu, więc możemy utworzyć
pustą tablicę iterować sobie po całym takim obiekcie tablicopodobnym i poszczególne jego elementy
do tej pustej tablicy upychać, a później ją zwrócić. No i będziemy mieli prawdziwą tablicę z tymi elementami,
więc ja teraz tutaj wkleję kod za to odpowiedzialny, żeby nie pisać, bo nie jest on zupełnie skomplikowany.
Czyli w tej funkcji, tworzymy pustą tablicę iterujemy po tym, co zostało tu przekazane czyli nodeList
np. ths i do arr.push upychamy takie nodeList, a następnie tą tablice zwracamy.
Mam nadzieję, że łapiesz o co chodzi.
Czyli teraz jeżeli tutaj mamy target, a ja będę chciał sobie napisać np. thsArr, czyli tablica z tymi
ths'ami, czyli dokładnie elementami th. Będę mógł się odwołać do makeArray,
bo ją wyżej stworzyliśmy i przekazać jej tutaj właśnie te ths.
Zaraz ci pokaże, jak dokładnie wygląda, zróbmy sobie console.log ths.
Po kliknięciu została tutaj zwrócona tablica.
Wygląda to podobnie, natomiast tym razem jest to prawdziwa tablica, która będzie już miała IndexOf
oraz inne metody.
I teraz mógłbyś pomyśleć, że my sobie wzięliśmy te wszystkie elementy th i jakoś jest skopiowaliśmy.
Natomiast już ci w tym kursie tłumaczyłem, że kopiowane są tylko wartości prymitywne, a takie wartości
jak tutaj, są to po prostu obiekty, które są przekazywane przez referencje, czyli jeżeli tutaj wywołaliśmy
makeArray i przekazaliśmy ths,
czyli ten obiekt tablicopodobny, zwrócony z metody querySelectorAll.
To on został przekazany w to miejsce, poprzez referencje.
I tutaj po nim iterowaliśmy i każdy jego element, czyli każdą taką komórkę th konkretnie będzie to obiekt
wrzucaliśmy do tablicy.
Czyli tylko referencje tu przekazywaliśmy, a na końcu tą tablicę zwróciliśmy.
Czyli tak naprawdę, nic nie kopiowaliśmy.
Jedynie zwróciliśmy tablicę, w której są trzy elementy i są to referencje do tych obiektów, które również
tutaj są zapisane, ale dzięki takiemu zabiegowi możemy teraz korzystać z metod, które są na tablicach
dostępne.
Więc jeżeli teraz będę chciał, tutaj stworzyć zmienną którą, nazwę index, to mogę się odwołać do
thsArr, bo jest to prawdziwa tablica, do jej indexOf i sprawdzić czy kliknięty właśnie czyli e.target, kliknięty
element w tej tablicy się znajduje.
Czyli jeżeli napiszemy target, to tutaj powinien zostać zapisany jako indeks.
No i teraz zobaczmy console.log index, przechodzimy do konsoli, klikam pierwszy, mamy 0.
Działa tak jak chcieliśmy.
Klikam drugi mamy 1 i klikam trzeci mamy 2.
Z tego powodu, że właśnie te elementy tutaj były wcześniej zapisane i pobrane przez querySelectorAll
po kolei, czyli pierwszy, drugi, trzeci.
Skoro tutaj w makeArray wrzucaliśmy je do tablicy, to znowu było to po kolei, czyli dokładnie w ten
sam sposób.
No i teraz jeżeli klikniemy w taki element, mamy go pod e.target to sobie sprawdzamy w tej tablicy, pod którym
on jest indeksem i dzięki temu nam to działa.
Powiem ci od razu, że będziemy chcieli sortować sobie tablicę z naszymi elementami tr, które są tutaj, a znowu,
że jest to obiekt tablicopodobny, to nie ma metody sort, którą ci pokazywałem w lekcji o sortowaniu tablic.
Więc również trs chcemy sobie zamienić funkcją makeArray na prawdziwą tablicę.
Więc możemy to zapisać w tym miejscu i napiszemy trsArr
równa się makeArray i przekażemy tutaj trs, czyli tę zmienną, która jest u góry i powinno być OK.
No i teraz przejdźmy do rzeczy najbardziej, tutaj, można powiedzieć zaawansowanej, ona nie jest bardzo
skomplikowana, ale będę chciał ci ją również dokładnie wytłumaczyć. Skoro pod trsArr mamy wszystkie
elementy tr pobrane ze strony z tbody.
W każdym z tych elementów oczywiście, do td, możemy się odwołać.
Nie ma żadnego problemu.
Skoro już tutaj mamy i skoro wiemy, że zamieniliśmy to na prawdziwą tablicę, to możemy na tej tablicy
użyć funkcji sort.
A więc
trsArr.sort,
no i mam nadzieję, że pamiętasz,
jeżeli nie, to wróć do lekcji o funkcji sort o sortowaniu, przekazujemy tutaj funkcję, która będzie przyjmować
dwa elementy.
Możemy je nazwać a i b, oczywiście dowolnie.
I teraz jeden element, to będzie jeden taki element tr, czyli a, a b to będzie drugi element tr
i możemy to bez problemu zobaczyć console.log a, console.log b. Warto korzystać z tego i na każdym etapie sprawdzać,
o co chodzi.
Klikam Imię i jak widzisz wszystkie te tr'y zostały po kolei wyświetlone,
a w nim mamy elementy td.
I teraz właśnie zapytasz mnie, po co nam był ten indeks,
jeżeli kliknęliśmy na nazwisko i tutaj mamy 1, po co nam to było.
Zauważ że jeżeli mamy tutaj tr, mamy tutaj trzy jego dzieci, to to dziecko będzie pod indeksem 0, to
będzie pod indeksem 1, a to pod indeksem 2. Jeżeli klikniemy na nazwisko i w zmiennej indeks zapisaliśmy
jedynkę, bo to było 0, 1, 2 to teraz z tą 1 możemy polecieć dalej i w tr odwołać się do jego dzieci
i powiedzieć 1.
W ten sposób odwołamy się do Kowalski, czyli do nazwiska, a więc po kolei, do tego wszystkiego co tutaj
się znajduje.
Jeżeli robisz ze mną, to zaraz będziesz wiedział, o co chodzi, a oraz b w tym miejscu. To są poszczególne
elementy tr.
Czyli teraz możemy się odwołać do dzieci tego elementu, a pokazywałem ci już w tym kursie, że możemy to
zrobić poprzez kropka children.
Jak to zrobimy? Stworzymy zmienną nazwiemy tdA,
na przykład.
Czyli jak będzie będzie to komórka td elementu a i napiszemy tutaj
a.children. Pokażę ci przy okazji, co nam zwróci children, żebyś miał pewność
nad czym pracujemy, teraz jeszcze jak widzisz, zwróci nam taki obiekt tablicopodobny, w którym będziemy
mieli trzy td, czyli w przypadku pierwszego wiersza będzie to Jan Kowalski 33.
Możemy sprawdzić, będzie to tutaj na samej górze.
Jak widzisz podświetla nam się to w tle.
Jeśli tu najeżdżam, więc wiemy, że dokładnie o to chodzi i teraz skoro znamy już ten indeks, bo przecież tutaj
go sobie zapisaliśmy, klikniętego elementu, to mogę się odwołać do a.children. Jest to obiekt tablicopodobne.
Jeśli podam mu tutaj 1, to będziemy mieli tę komórkę
i zauważ w tle, że jest podświetlana komórka
Kowalski, Ok, czyli odwołajmy się tutaj do index.
Wiesz, że index możemy podać w takich nawiasach.
Tutaj możemy np. napisać 1.
Mamy to zapisane tutaj.
Więc napiszmy index. Do tej pory może jest to zagmatwane, ale wierzę, że jeżeli robisz krok po kroku to
się w tym połapiesz. Na tym to mniej więcej polega.
Oczywiście to można zrobić na wiele innych sposobów.
Więc teraz cochcę utworzyć zmienną tdB.
Bo przypominam, że ta funkcja sort przyjmuje dwa kolejne elementy do sortowania w tablicy.
A w tej tablicy mamy wszystkie elementy tr.
Jeżeli potrzebujesz, wróć oczywiście do tej lekcji, więc napiszemy children
i znowu index i zauwasz, jak się to children właśnie tutaj przydało.
I teraz jeżeli sobie wyświetlimy tdA, to jak widzisz będziemy mieli Jan, Maria, Tomasz itd.
Wszystko nam fajnie działa.
Natomiast jeżeli bym kliknął, tutaj wyczyszczę, na wiek, to powinny być
te liczby wyświetlone.
No i dokładnie tak się dzieje.
No i poszczególne komórki, to będzie A oraz B.
Czyli teraz możemy je sortować i być może pamiętasz, jak działa funkcja sort.
Jeżeli nie, to wróć do tej lekcji.
Ważne jest co ta funkcja zwraca.
Ja w tym kursie pokazywałem ci, że możemy porównywać ciągi znaków, więc będziemy chcieli tutaj po odwołaniu
się już do
A czy.a.children
index.
Jak widzisz, to zostało nam zwrócone, czyli cały element będziemy chcieli pobrać
tekst, który znajduje się w środku.
Więc możemy się odwołać do textContent, tutaj oraz tutaj. Teraz gdybyśmy to wyświetlili w konsoli to już nie będziemy mieli komórki td,
ale właśnie 33.
Czy w tym przypadku teraz Polak, Kowalewski i tak dalej.
I pokazywałem ci, że możemy porównywać stringi.
W taki oto sposób i tdA mniejsze od tdB.
Wtedy, jeżeli tutaj postawimy stringi, a to dokładnie zostanie zwrócone, to będą one porównywane alfabetycznie.
Czyli, możemy tutaj napisać, Jeżeli A jest mniejsze od B, czyli występuje wcześniej w alfabecie, to będziemy
chcieli zrzucić
1.
Jeżeli else if tdA jest większe od tdB, to będziemy chcieli zwrócić minus 1.
To wszystko tłumacze w lekcji o sortowaniu, więc możesz do niej wrócić, raz jeszcze powtarzam i ostatni warunek
jest taki, że jeżeli będą te ciągi równe, to wtedy zwracamy 0. Teraz będę chciał ci pokazać, jak ta posortowana
tablica wygląda i będziemy mogli przejść dalej, czyli console.log trsArr. Jak ta tablica teraz wygląda?
Zobaczmy raz jeszcze. Klikam Imię i teraz mamy zwróconą tablice.
Gdybyśmy sobie do niej przeszli, mamy oczywiście w niej element tr i gdybyśmy szukali dzieci teraz będzie to
trudne do zrobienia, ale gwarantuję ci, że zostało to poprawnie posortowane.
Teraz wystarczy te elementy wstawić na stronę.
Ja ci mówiłem, że jeżeli wstawimy do dokumentu jakiś element, który już tam istnieje, to zostanie tylko
zamienione kolejnością.
Natomiast ta lekcja robi się już długa, dlatego chcę ją podzielić na dwie części.
Przeanalizuj sobie to, co zrobiliśmy do tej pory, tak abyś to dobrze rozumiał i zapraszam Cie do drugiej części,
gdzie dokończymy naszą aplikację.
Kod
makeArray · 7 min
function makeArray(nodeList) {
var arr = [];
for(var i = 0; i < nodeList.length; i++) {
arr.push(nodeList[i]);
}
return arr;
}Sortowanie tabeli po kolumnach cz. 1 · 7 min
(function() {
var table = document.querySelector("#myTable"),
ths = table.querySelectorAll("thead th"),
trs = table.querySelectorAll("tbody tr");
function makeArray(nodeList) {
var arr = [];
for(var i = 0; i < nodeList.length; i++) {
arr.push(nodeList[i]);
}
return arr;
}
function sortBy(e) {
var target = e.target,
thsArr = makeArray(ths),
trsArr = makeArray(trs),
index = thsArr.indexOf(target);
trsArr.sort(function(a, b) {
var tdA = a.children[index].textContent,
tdB = b.children[index].textContent;
if(tdA < tdB) {
return 1;
} else if(tdA > tdB) {
return -1;
} else {
return 0;
}
console.log(trsArr);
});
}
for(var i = 0; i < ths.length; i++) {
ths[i].onclick = sortBy;
}
})();Sortowanie tabeli po kolumnach cz. 1 - CSS · 1 min
@charset "utf-8";
* {
padding: 0;
margin: 0;
}
body {
font: 14px/18px Tahoma, Arial, sans-serif;
}
.container {
width: 80%;
margin: 30px auto;
overflow: hidden;
}
h1 {
padding-bottom: 20px;
margin-bottom: 40px;
border-bottom: 1px #D8D8D8 solid;
line-height: 1;
font-weight: normal;
color: #666666;
}
table {
width: 100%;
border-collapse: collapse;
}
table th,
table td {
padding: 10px 20px;
text-align: left;
}
table th {
padding: 20px;
border-right: 1px #595959 solid;
background-color: #2C2C2C;
position: relative;
cursor: pointer;
color: #E2E2E2;
}
table th:after {
content: "";
display: none;
width: 0;
height: 0;
margin-top: -5px;
position: absolute;
top: 50%;
right: 20px;
}
table th.asc:after {
display: block;
border-style: solid;
border-width: 0 5px 10px 5px;
border-color: transparent transparent #E2E2E2 transparent;
}
table th.desc:after {
display: block;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: #E2E2E2 transparent transparent transparent;
}
table tr:nth-child(even) td {
background-color: #F2F2F2;
}