Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jak wygenerować tabelke 3x3 w jsie
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Caw
Witajcie
na wstępie chce dodać że dopiero się uczę więc pytam o takie podstawy ale dla mnie ważne.

wydawało mi się proste zadanie chce zbudować tabelkę i wczytać do niej dane z tablicy, tabelka w html powinna wyglądać tak:
1 - 2 - 3
4 - 5 - 6
7 - 8 - 9


Kod
var arr = [1,2,38,4,5,6,7,8,900];
var table = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");

for (i=0; i<arr.length; i++) {
  console.log(arr[i]);                
}        
                
// dodanie id do tabeli
table.setAttribute('id','master');
table.appendChild(tr);
tr.appendChild(td);
document.body.appendChild(table);



tylko nie wiem jak zrobić żeby powstała taka tabelka 3x3.

Mogę prosić o jakiąś podpowiedź?

kamil4u
Musisz wykorzystać pętlę smile.gif

Pseudokodem:
Kod
table = tworzenie_tabeli();
pętla_po_tablicy( zmienna i = aktualny indeks ){
jezeli i%3 równa się 0{ //co 3 raz tworzymy nowy wiersz( tr )
   tr = stwórz_tr();
   table.umieść( tr );
}
td = stworz_td();
td.wartosc = tablica(i); //tu wykorzystaj innerHTML
tr.umiesc( td );
}

body.umiesc( table );
wNogachSpisz
Niestety to jest niewydajne, trzeba na żywca walić HTML sad.gif

Kod
$('body').append('<table>...</table>')
kamil4u
Nie trzeba. Jeżeli nie jest dla Ciebie najważniejsza szybkość działania kodu( a to kwestie rzędu kilku ms(raz miałem przypadek, że musiałem optymalizować jak się dało ) to moim zdaniem lepiej korzystać z metod DOM-owskich. Powód to, moim zdaniem, większa czytelność kodu i korzystanie z tego co zostało stworzone specjalnie po to, aby manipulować drzewem DOM. Mamy dzięki temu trochę większą kontrolę.

Cytat
$('body').append('<table>...</table>')

Akurat jQuery( z tego co pamiętam ) ma dość złożony mechanizm operacji na drzewie DOM i korzysta zarówno z metod DOM-owskich jak i z innerHTML.

Cytat
Niestety to jest niewydajne,

To nie jest niewydajne, jest odrobinę mniej wydajne, niż innerHTML.
Caw
kamil4u - super sprawdziałem i działa smile.gif nie znałem operatora modulo i nie wpadłbym na to wink.gif dzięki jeszcze raz
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.