Da der TE ja bereits die Lösung hat, gehe ich mal davon aus, dass ich das hier so posten darf. Falls nicht, einfach entfernen...
Wer viel mit JavaScript zu tun hat, sollte sich mal mit prototype beschäftigen. Gerade dieser Fall, eine Tabelle mit bestimmten Anzahl an Zeilen und Spalten vorzudefinieren, wäre mit ein wenig Anpassungen über prototype auch in dieser Kürze zu erledigen:
var _laenge = 8;
_table = document.createElement( 'table' );
document.body.appendChild( _table.addRows(_laenge).addCols(_laenge, {'class':'foo'}) );
Dahinter stecken einfach nur die zwei Erweiterungsmethoden addRows und addCols, die ich per prototype an das HTMLTableElement gebunden habe.
Diese Erweiterungen verwende ich häufig in meinen Projekten, weil mein JavaScript dadurch wesentlich lesbarer wirkt. Ich bin zudem auch kein Freund vieler Schleifen im Hauptcode und lagere daher einiges in die Erweiterungen aus.
Das macht natürlich nur bei häufiger Verwendung Sinn!
Nutzt man das nur ein einziges Mal, ist das den Aufwand nicht wert, das ist klar.
EDIT:
Hier noch kurz die prototypes für die, die es interessiert
HTMLTableElement.prototype.addRows = function(x) {
for ( i=0; i<=x; i++ ) this.appendChild( document.createElement('tr') );
return this;
}
HTMLTableElement.prototype.addCols = function(x, opts) {
this.childNodes.forEach( (row) => {
for ( i=0; i<=x; i++ ) {
td = document.createElement( 'td' );
Object.entries(opts).forEach( ([key, val]) => { td.setAttribute(`${key}`, `${val}`); } );
row.appendChild( td );
}
});
return this;
}
Alles anzeigen