Tabelle durch Schleife erstellen!?

[horsti]

Hallo zusammen,

Ich habe in Javascript folgende Tabelle erstellt:

document.write
('<table width="400" height="400">\ <tr>\ <td class="puzzle" name="feld_0" onclick="verschieben(0)" id="feld_0">'+ akt_inhalte[0] +'</td>\ <td class="puzzle" name="feld_1" onclick="verschieben(1)" id="feld_1">'+ akt_inhalte[1] +'</td>\ <td class="puzzle" name="feld_2" onclick="verschieben(2)" id="feld_2">'+ akt_inhalte[2] +'</td>\ <td class="puzzle" name="feld_3" onclick="verschieben(3)" id="feld_3">'+ akt_inhalte[3] +'</td></tr><tr>\ <td class="puzzle" name="feld_4" onclick="verschieben(4)" id="feld_4">'+ akt_inhalte[4] +'</td>\ <td class="puzzle" name="feld_5" onclick="verschieben(5)" id="feld_5">'+ akt_inhalte[5] +'</td>\ <td class="puzzle" name="feld_6" onclick="verschieben(6)" id="feld_6">'+ akt_inhalte[6] +'</td>\ <td class="puzzle" name="feld_7" onclick="verschieben(7)" id="feld_7">'+ akt_inhalte[7] +'</td></tr><tr>\ <td class="puzzle" name="feld_8" onclick="verschieben(8)" id="feld_8">'+ akt_inhalte[8] +'</td>\ <td class="puzzle" name="feld_9" onclick="verschieben(9)" id="feld_9">'+ akt_inhalte[9] +'</td>\ <td class="puzzle" name="feld_10" onclick="verschieben(10)" id="feld_10">'+ akt_inhalte[10] +'</td>\ <td class="puzzle" name="feld_11" onclick="verschieben(11)" id="feld_11">'+ akt_inhalte[11] +'</td></tr><tr>\ <td class="puzzle" name="feld_12" onclick="verschieben(12)" id="feld_12">'+ akt_inhalte[12] +'</td>\ <td class="puzzle" name="feld_13" onclick="verschieben(13)" id="feld_13">'+ akt_inhalte[13] +'</td>\ <td class="puzzle" name="feld_14" onclick="verschieben(14)" id="feld_14">'+ akt_inhalte[14] +'</td>\ <td class="puzzle" name="feld_15" onclick="verschieben(15)" id="feld_15">'+ akt_inhalte[15] +'</td>\ </tr></table>\ ');

Da dieses "ausschreiben" aber sehr viel Platz einnimmt und wenig variabel ist möchte ich die Tabelle durch eine Schleife darstellen. Dabei ist zu beachten, dass sowohl "name="feld_"" / "id="feld_"" als auch die Variablen akt_inhalte[X] fortlaufend größer werden müssen!
Ich habe schon einige Versuche gestartet, aber scheinbar will es einfach nicht klappen, vielleicht habt ihr ja ne Lösung "parat"!!!

Danke im Vorraus
mfg horsti

[wahsaga]

hi,

Dabei ist zu beachten, dass sowohl "name="feld_"" / "id="feld_"" als auch die Variablen akt_inhalte[X] fortlaufend größer werden müssen!

das sollte mit einer einfachen for-schleife ja kein problem darstellen.

Ich habe schon einige Versuche gestartet

dann zeig doch mal her ...

gruß,
wahsaga

[horsti]

dann zeig doch mal her ...

So ein Gebilde habe ich konstruiert, ist allerdings (denke ich mal) weit von der richtigen Lösiung entfernt!!!

document.write
(
'<table width="400" height="400">'
for (n = 0; n < 16; n++)
  {
 document.write (' <td class="puzzle" name="feld_+'n'+" onclick="verschieben(+'n'+)" id="feld_+'n'+">'+ akt_inhalte[+n+] +'</td>');
  }
document.write
('</table>');

mfg horsti

[wahsaga]

hi,

document.write
(
'<table width="400" height="400">'
for (n = 0; n < 16; n++)
  {
document.write (' <td class="puzzle" name="feld_+'n'+" onclick="verschieben(+'n'+)" id="feld_+'n'+">'+ akt_inhalte[+n+] +'</td>');
  }
document.write
('</table>');

die schleife gehört natürlich außerhalb des document.write.
und mit den string-begrenzern musst du auch aufpassen.
und </ innerhalb von javascript-literalen als </ maskieren.

document.write('<table width="400" height="400">');
for (n = 0; n < 16; n++)
{
  document.write (' <td class="puzzle" name="feld_' + n + '" onclick="verschieben(' + n + ')" id="feld_' + n + '">' + akt_inhalte[n] + '</td>');
}
document.write('</table>');

gruß,
wahsaga

[horsti]

Danke, du hast mir schonmal echt weitergeholfen, allerdings habe ich nun das Problem, dass ja nach alles 4 TDs ein Tr kommen muss, die Tabelle soll ja 4*4 sein!
Ist glaub ich nich so einfach sowas in eine Schleife einzubauen, oder?

mfg horsti

[wahsaga]

hi,

Danke, du hast mir schonmal echt weitergeholfen, allerdings habe ich nun das Problem, dass ja nach alles 4 TDs ein Tr kommen muss, die Tabelle soll ja 4*4 sein!
Ist glaub ich nich so einfach sowas in eine Schleife einzubauen, oder?

entweder prüfst du, ob der zähler aktuell einen durch 4 teilbaren wert hat, und gibst dann entsprechendes aus (achtung, schleife dann von 1 loslaufen lassen!) - dabei hilft der modulo-operator.
oder du verschachtelst zwei schleifen ineinander.

gruß,
wahsaga

[horsti]

Danke für alles wahsaga, bist nen Spitzentyp ;-)
Habe es jetzt folgendermaßen gelöst:

document.write('<table width="400" height="400"><tr>');
for (x = 0; x < 16; x++)
{
  document.write ('<td class="puzzle" name="feld_' + x + '" onclick="verschieben(' + x + ')" id="feld_' + x + '">' + akt_inhalte[x] + '</td>');
  if ((x == 3) || (x == 7) || (x == 11))
    {
   document.write ('</tr><tr>');
 }
}
document.write('</table>');

[FrankieB]

Hi,

als ich dir schrieb wußte ich noch nicht, daß dir wahsaga schon geantwortet hatte, aber:

if ((x == 3) || (x == 7) || (x == 11))

das könnte man geschickter lösen ;-)

... un beachte auch daran was ich dir schrieb, das mit den evtl. notwendigen tags vor/nach deiner Schleife.

Grüsse
Frankie

[horsti]

das könnte man geschickter lösen ;-)

Ich bin jetzt erst einmal happy, das es läuft, wobei das mit dem modulo natürlich auch ne gute sache ist, wäre jetzt aber zu umständlich die schleife bei 1 loslaufen zu lassen, dann müsste ich zuviele nachfolgenden Dinge ändern!

mfg

[MudGuard]

Hi,

entweder prüfst du, ob der zähler aktuell einen durch 4 teilbaren wert hat, und gibst dann entsprechendes aus (achtung, schleife dann von 1 loslaufen lassen!)

Man kann auch prüfen, ob (zähler + 1) modulo 4 == 0 ist ...

cu,
Andreas

[wahsaga]

hi,

entweder prüfst du, ob der zähler aktuell einen durch 4 teilbaren wert hat, und gibst dann entsprechendes aus (achtung, schleife dann von 1 loslaufen lassen!)

Man kann auch prüfen, ob (zähler + 1) modulo 4 == 0 ist ...

sicher, viele wege führen nach rom :-)

gruß,
wahsaga

[MudGuard]

Hi,

sicher, viele wege führen nach rom :-)

Zu Atari-Zeiten hieß das noch: viele Pointer führen ins ROM.
Heutzutage wohl eher ins RAM ;-)

cu,
Andreas

[FrankieB]

Hallo Horsti,

Ist glaub ich nich so einfach sowas in eine Schleife einzubauen, oder?

doch, ist es:

Wenn modulo n,4 = 0 beginne neue Tabellenzeile. Achte darauf, dass Du evtl. noch ein öffnendes/schliessendes <tr>-tag vor/nach der Schleife brauchst, damit es eine "richtige" Tabelle wird.

Grüsse
Frankie