Dynamiczne tworzenie wierszy tabeli tr i td
Treść zadania
W dokumencie przygotowano tabelę:<table><tbody id="cialoTabeli"></tbody></table>
oraz pola: <input type="text" id="osobaImie" value="Anna">, <input type="number" id="osobaWiek" value="24"> i przycisk <button id="btnDodajOsobe">Dodaj osobę</button>.
Napisz skrypt, który po kliknięciu przycisku tworzy wiersz <tr>, tworzy dwie komórki <td> z wartościami z pól, dołącza obie komórki do wiersza tr, a wiersz dołącza do #cialoTabeli.
Co będzie oceniane
- Utworzenie elementu tr oraz dwóch elementów td.
- Przypisanie treści z pól formularza do odpowiednich td.
- Dołączenie komórek do tr i wiersza do #cialoTabeli.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Dodanie nowego wiersza z danymi osoby — licznik #cialoTabeli tr = 1; tekst #cialoTabeli tr td:first-child = Anna; tekst #cialoTabeli tr td:last-child = 24
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Utwórz wiersz tr z komórkami td i dodaj do #cialoTabeli po kliknięciu #btnDodajOsobe
Wskazówki
Wskazówka 1
Budowanie tabeli polega na hierarchicznym tworzeniu elementów: komórki wstawiasz do wiersza, a wiersz do sekcji ciała tabeli.
Wskazówka 2
Utwórz element tr oraz dwie komórki td. Ustaw treść tekstową komórek na wartości pobrane z pól imienia i wieku, dołącz komórki do wiersza, po czym dołącz wiersz do elementu tbody.