jak wygenerować tabelke 3x3 w jsie Opcje

[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ę

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 );

Ten post edytował kamil4u 21.06.2012, 17:45:21

[wNogachSpisz]

Niestety to jest niewydajne, trzeba na żywca walić HTML

Kod

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

Ten post edytował wNogachSpisz 21.06.2012, 18:26:14

[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ę.

$('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.

Niestety to jest niewydajne,

To nie jest niewydajne, jest odrobinę mniej wydajne, niż innerHTML.

[Caw]

kamil4u - super sprawdziałem i działa nie znałem operatora modulo i nie wpadłbym na to dzięki jeszcze raz