Tabelle dynamisch ändern mit Select-Box

[ai1045]

Hi leute,

Folgendes:

Wir haben eine Select-Box, aus der wir 4 Möglichkeiten auswählen können: 3x3, 3x4, 4x3 und 4x4.
Wenn man 3x3 auswählt, so soll eine 3x3 Tabelle angezeigt werden (3 Zeilen, 3 Spalten)
Wenn man z.B. 3x4 auswählt, dann 3 Zeilen, 4 Spalten, usw...

Wie mache ich das?

Danke im Voraus!

 

[littleHtml Freak]

hallo,
mit createElement kannst du html tags erzeugen:

    var tr = document.createElement( 'tr' );    
    tr.width = 400;
    tr.height = 200;                
    document.body.appendChild( tr );

tr lässt sich durch jeden beliebigen html tag ersetzten.
das führst du aus, wenn jemand auf einen submit button des Formulars, in dem man die Größe der Tabelle auswählt, klickt (mit onclick="funktion()")

ich hoffe das ist das, was du wissen wolltest.

gruß

 

[threadi]

Hinweis: in obigem Code wird direkt im body ein tr-Element eingefügt, was natürlich nicht valide ist. Man müsste die Tabellenzeile in einem table-Element per appendChild() einfügen.

 

[littleHtml Freak]

das ist natürlich richtig... entschuldige

 

[gform]

function createTable(tr, td) {
     var table = document.createElement("table");
     for (var i = 0; i < tr; i++) {
         var row = table.insertRow(-1);        
         for (var j = 0; j < td; j++) {            
             row.insertCell(-1);         
         }    
     }         
     return table; 
}

 

[ai1045]

danke für den tipp... aber das eigentliche Problem besteht hierin:

Wenn ich z.B. 4x4 gewählt habe und dann wieder 3x3 auswähle... dann muss ich die vorher hinzugefügte zeile bzw. spalte wieder löschen...

ist das möglich?

 

[littleHtml Freak]

du könntest den einzelnen spalten ids zuorden
wenn du sie wieder löschen möchtest könntest du sie mit getElementById ansprechen. ob man tags mit js löschen kann weiß ich nicht aber google hilft dir da weiter ;) sonst kannst du auf jeden fall die breite bzw. höhe auf 0px setzten und dann sieht man die elemente nicht mehr ;)

 

[mermshaus]

Ja, Elemente können aus dem DOM entfernt werden.

- https://developer.mozilla.org/En/DOM/Node.removeChild