André Bräkling: Tabelle lässt sich zwar drehen, aber nicht zurückdrehen

Beitrag lesen

Hallo zusammen,

ich habe ein Schachbrett zusammengeschustert und möchte nun eine Funktion implementieren, die es ermöglicht, dass Brett umzudrehen. Per Default ist weiß unten, durch einen Klick auf einen Button soll schwarz unten stehen. Immerhin soll es Spieler geben, die grundsätzlich von unten nach oben spielen wollen - ungeachtet ihrer Farbe.

Das "Drehen an sich" funktioniert mit dieser Funktion einwandfrei:

function rotatetab () {

gameTab = document.getElementById("gametab");

var aryRows = gameTab.rows;
 var intRows = aryRows.length;
 var aryNew = new Array(intRows);

for (var i = 0; i < intRows; i++) {
  aryNew[intRows-i-1] = aryRows[0];
  gameTab.deleteRow(0);
 }

for (var i = 0; i < intRows; i++) {
  gameTab.appendChild(aryNew[i]);
 }
}

Leider kann ich diese Funktion aber nicht benutzen, um die Tabelle "zurückzudrehen", da durch appendChild keine neuen Rows angelegt werden (gameTab.rows bleibt leer), obwohl die Objekte der Tabelle hinzugefügt werden.

Zwar gibt es eine Funktion HTMLTableElement.insertRow, doch diese erzeugt eine leere Zeile, zu der ich dann wieder einzeln meine Zellen hinzufügen muss. Ich möchte jedoch möglichst unkompliziert meine in aryNew gespeicherten HTMLTableRowElement-Objekte an die Tabelle anhängen.

Aktuell sehe ich also nur folgende Möglichkeiten:
1. Die HTMLTableRowElement-Objekte komplett zerlegen (Cells, Attributes, ...), per insertRow eine neue Zeile erzeugen und diese dann aus dem zuvor zerlegten Objekt neu erstellen. (Ich hoffe man versteht, was ich meine.) -> Umständlich.
2. Per appendChild das gesamte HTMLTableRowElement einfügen. -> Es werden keine wirklichen Rows angelegt (siehe oben erläutertes Problem).

Ich suche also eine Möglichkeit, ein bestehendes HTMLTableRowElement-Objekt als ganzes in eine bestehende Tabelle als "echte Row" einzufügen, so dass meine obige Funktion auch umgekehrt funktioniert. Oder halt eine alternative Lösung ;-)

Wäre Klasse, wenn hier jemand eine passende Idee hat, durch die ich den JavaScript-Code auf der Seite nicht unnötig aufblähe. Ich kann mir irgendwie nicht vorstellen, dass es dafür keine brauchbare Lösung gibt.

Danke im vorraus!