Dynamiczna tabela w HTML
Dynamiczne, dynamiczniejsze, najdynamiczniejsze
Dawno, dawno temu, za siedmioma morzami, siedmioma rzekami i kilkunastoma pagórkami, w czasach bardzo zamierzchłych, ludzie siedzieli w jaskiniach i próbowali znaleźć zastosowanie dla okrągłych kamieni, zakąszając od czasu do czasu świeżym mięsem upolowanej i upieczonej zwierzyny. Kombinowali, kombinowali, bo czegoś im brakowało.
Nieco później, gdy już ludzie opuścili chłodne jaskinie, wprowadzili handel, zaczęli na szeroką skalę stosować fermentację wytwarzając coraz to wymyślniejsze napoje przynoszące szczęście, sprowadzili ziemniaki do Europy i dokonali parę innych ciekawych odkryć - pojawił się Internet. Mało kto już pamięta, że strony na początku były statyczne. Nawet ci, którzy te czasy pamiętają, z trudem potrafią sobie wyobrazić powrót do tamtych rozwiązań.
Czegoś ludziom w stronach internetowych brakowało - brakowało interakcji. Dość szybko pojawił się termin DHTML, dynamiczny HTML (ang. Dynamic HyperText Markup Language), oznaczający współpracę HTML z językiem skryptowym (na przykład JavaScript) i z czymś, co pozwoli definiować style (na przykład CSS). Od tego momentu strony internetowe stały się tak dynamiczne, jak Małysz na progu.
Tak w skrócie wyglądała historia świata.
Dynamiczna tabela HTML
Nie jestem w stanie zająć się wszystkimi dynamicznymi rzeczami we wszechświecie, dlatego postanowiłem te rzeczy ograniczyć do tabeli HTML. Istnieje oczywiście możliwość przetwarzania wszystkiego na serwerze, ale takie rozwiązanie ma mnóstwo wad. Po pierwsze mocno obciążamy serwer, który jest jeden, a po drugie użytkownik musi oczekiwać na odpowiedź tego serwera dłużej, niż gdyby wszystko działo się na miejscu. Skorzystajmy zatem z mocy komputera użytkownika! Powiem więcej - zastosujmy przetwarzanie rozproszone! Czym jest bowiem przekazanie obliczeń do różnych komputerów jak nie przetwarzaniem rozproszonym?
Pisząc o dynamicznej tabeli miałem na myśli taką tabelę HTML, do której można dodawać kolejne wiersze i z której można wybrane wiersze usuwać. Przyjrzyjmy się takiej dynamicznej tabeli w akcji:
| # | Wartość | |
|---|---|---|
| 1 | Wartość 1 | Usuń |
Kliknięcie w przycisk dodaje wiersz z losową wartością, natomiast kliknięcie w element Usuń w trzeciej kolumnie wskazany wiersz usuwa. Warto zwrócić uwagę na sposób numeracji wierszy, który jest cały czas utrzymywany. Gdy w numeracji pojawia się dziura, wartości są aktualizowane.
Niedynamiczny kod strony - JavaScrip + HTML
Poniżej zamieszczam cały kod strony, w jednym kawałku. Można go sobie skopiować na bok i poeksperymentować. Przyjrzyjmy się teraz poniższemu listingowi:
<head>
<title>Dynamiczna tabela w HTML</title>
</head>
<body>
<style type="text/css">
.Clickable{cursor:pointer;color:Blue}
.Clickable:hover{text-decoration:underline}
table,th,td{border:1px solid black;}
table{border-collapse:collapse;}
td{padding:0px 5px}
th,th+th+th{width:40px;background:#A0A0FF}
th+th{width:100px}
</style>
<input type="button" onclick="AddRow()" value="Dodaj"/>
<table id="myTable">
<tr><th>#</th><th>Wartość</th><th></th></tr>
<tr><td>1</td><td>Wartość 1</td><td class="Clickable">Usuń</td></tr>
</table>
<script type="text/javascript">
var tbl = document.getElementById("myTable");
for (var i=1; i<tbl.rows.length; i++){
tbl.rows[i].cells[2].addEventListener("click",RemoveRow,false);
}
function AddRow(){
var row = tbl.insertRow(tbl.rows.length);
row.insertCell(0).innerHTML = tbl.rows.length-1;
row.insertCell(1).innerHTML = "Wartość "+Math.floor(Math.random()*1000);
cell = row.insertCell(2);
cell.innerHTML = "Usuń";
cell.className = "Clickable";
cell.addEventListener("click",RemoveRow,false);
}
function RemoveRow(e){
var rowID=parseInt(this.parentNode.cells[0].innerHTML);
tbl.deleteRow(rowID);
ApplyNumeration();
}
function ApplyNumeration(){
for (var i=1; i<tbl.rows.length; i++){
tbl.rows[i].cells[0].innerHTML = i;
}
}
</script>
</body>
</html>
Kod jest krótki, ale, tradycyjnie, kilka rzeczy postaram się wyjaśnić.
Omówienie statycznego kodu dynamicznej tabeli
Początek skryptu, a właściwie pierwsze cztery linijki, to odnalezienie wszystkich trzecich kolumn w tabeli i podpięcie metody, która będzie wywoływana w momencie kliknięcia myszką. To zdarzenie wywołuje naszą metodę RemoveRow - to w niej dzieje się cała magia usuwania. Mając referencję do klikniętej komórki odnajdujemy jej rodzica (element <tr>) i pobieramy wartość z jej pierwszej komórki (element <td> z numerem wiersza). Mając numer wiersza możemy już wykonać operację usuwania i przenumerować wiersze.
Więcej dzieje się w operacji dodawania wiersza. Tutaj przydatne okazują się dwie funkcje:
- insertRow - dodaje wiersz pod wskazanym indeksem.
- insertCell - dodaje komórkę pod wskazanym indeksem.
Wiersz dodawany jest zawsze na końcu.
Kolejny etap do dodanie komórek:
- Pierwsza komórka służy do numeracji wiersza, więc wrzucamy tam liczbę wierszy pomniejszoną o jeden (nie wliczamy nagłówka).
- Druga kolumna to wartość. W przykładzie wrzucana jest tam wartość losowa. W konkretnych zatosowaniach może to być wartość wynikająca z logiki aplikacji lub pole tekstowe, w którym użytkownik może coś wpisać.
- Trzecia kolumna to element, którego kliknięcie wyzwala metodę usunięcia danego wiersza. To dlatego jest on przetwarzany nieco inaczej. Absolutnym minimum jest podpięcie zdarzenia kliknięcia na komórce - za to odpowiedzialna jest funkcja addEventListener. Oprócz tego elementowi przypisywany jest tekst (Usuń) oraz klasa (Clickable), która zdefiniowana jest w arkuszu stylów.
Podsumowanie
W logice kodu JavaScript wykorzystana jest wartość pierwszej kolumny i bez niej skrypt nie zadziała. Gdybyśmy zechcieli usunąć tę kolumnę, wszystko przestanie działać. Po pierwsze nie będzie informacji o numerze klikniętego wiersza, a po drugie - nie będzie się zgadzała liczba kolumn. Problem numeru wiersza można łatwo rozwiązać przypisując numer do elementu wiersza (w ostateczności zastosować pole ukryte). Numer kolumny, której kliknięcie będzie wyzwalało procedurę w usuwania wiersza można sparametryzować lub założyć, że jest to zawsze ostatnia kolumna i skorzystać z atrybutu length nagłówka tabeli.
To tylko kilka problemów, które mogą się pojawiać. Inne postaram się rozwiązać po otrzymaniu sygnału w postaci komentarza.
Przy okazji polecam inne wpisy dotyczące tabel HTML: Sortowanie tabeli w HTML i JavaScript - cz.1, Sortowanie tabeli w HTML i JavaScript - cz.2, Zaznaczanie komórek, wierszy i kolumn w tabeli HTML.
Kategoria:HTMLJavaScript
Komentarze: