Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Tworzenie tabeli
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
misiek_km
Witam!

Jak za pomocą jQuery stworzyć tabelkę?
Szukam kogoś kto wytłumaczy mi, a właściwie pokaże jak powinna wyglądać taka funkcja.

wzorowałem się na http://shize.de/jquery/gridtable/
ale nic z tego nie wyszło.


chciałbym coś prostego
  1. var table = $('<table />').appendTo('#JakiśDiv');
  2. var tr = $('<tr />').appendTo(table);
  3. var td = $('<td />').appendTo(tr);
  4. td.append('c1');
  5. td.append('c2');
  6. td.append('c3');
vokiel
Nie musisz tego aż tak rozbijać, poza tym kolejność nie ta. Do dokumentu dodajesz na końcu.

[JAVASCRIPT] pobierz, plaintext
  1. var table = $('<table><tr><td /></tr></table>');
  2. $('#JakiśDiv').append(table);
[JAVASCRIPT] pobierz, plaintext
misiek_km
tak tylko ja muszę stworzyć taką tabelkę
i wypełnić ją danymi pobranymi z XMLa
  1. <table cellpadding="5" cellspacing="5">
  2. <tr>
  3. <td rowspan="2">XXX</td>
  4. <td>t1</td>
  5. <td>t2</th>
  6. <td>t3</td>
  7. <td>t4</td>
  8. </tr>
  9. <tr>
  10. <td>d1</td>
  11. <td>d2</td>
  12. <td>d3</td>
  13. <td>d4</td>
  14. </tr>
vokiel
Kolejność tak jak pisałem, od końca, od elementu najbardziej w środku, w górę drzewa, a na koniec dodanie do dokumentu.
Czyli w Twoim przypadku, musisz tworzyć elementy td z treścią, dodać je do tr, później do table a na koniec dopisać do dokumentu.
Domyślam się, że dane które chcesz wpisać masz w jakiejś tablicy i możesz w pętli po nich iterować.

[JAVASCRIPT] pobierz, plaintext
  1. var table = $('<table cellpadding="5" cellspacing="5" /></table>');
  2. for (var i=0;i<xmlData.length;i++){
  3. var td = $('<tr><td rowspan="2">' + xmlData[i]['td1'] + '</td>
  4. <td>' + xmlData[i]['td2'] + '</td>
  5. <td>' + xmlData[i]['td3'] + '</th></tr>';
  6.  
  7. table.append(td);
  8. }
  9. $('#JakiśDiv').append(table);
[JAVASCRIPT] pobierz, plaintext
misiek_km
dzięki, o co mi chodziło.
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.