Organisieren Elemente in einer Tabelle mit DOM - JavaScript

Question

dieser Code ist eine Tabelle

var table = document.createElement("table"); 
if ((lines > 0) && (columns> 0)) { 
    var tbody = document.createElement("tbody"); 
    var tr, td; 
    for (var i = 0; i < lines; i++) { 
     tr = document.createElement("tr"); 
     for (var j = 0; j < columns; j++) { 
     td = document.createElement("td"); 
     tr.appendChild(td); 
     } 
     tbody.appendChild(tr); 
    } 
    table.appendChild(tbody); 
    document.body.appendChild(table); 

wie dieses Bild 1

class Panel und function zu putAndShowEquipment

function Panel(id, line, column) { 
    this.id = id; 
    this.lines = line; 
    this.columns = column; 
    this.equipments = []; 
    for(var i = 0; i < lines; i++{ 
     this.equipments[i] = []; 
    } 

} 

Panel.prototype.putAndShowEquipment = function(line, column, equipment) { 
    if ((line >= 0) && (line < this.lines) 
    && (column >= 0) && (column < this.columns) 
    && ((equipament === void 0) || (equipament instanceof Equipament))) { 
    this.equipaments[line][column] = equipament; 
    if (equipament) { 
     equipament.show(this.cell(line, column)); 
    } else { 
     (new View()).show(this.cell(line, column)); 
    } 
    } 
    return this; 
} 

zu erstellen

und ich möchte dieses Bild gemacht haben 2

und ich kann gemacht, wenn ich

tun

//panel with 4 lines and 4 columns to 16 equipments 
(new Panel("panel",4,4)) 
.putAndShowEquipment (0, 0, new Equipament()) 
.putAndShowEquipment (0, 1, new Equipament()) 
.putAndShowEquipment (1, 0, new Equipament()) 
.putAndShowEquipment (1, 1, new Equipament()) 
.putAndShowEquipment (2, 0, new Equipament()) 
.putAndShowEquipment (2, 1, new Equipament()) 
... 
; 

aber ich versuche, die lines und columns mit for und legte die Equipaments zu schaffen, ich vielleicht Einschränkung denken, wenn vier ist Spalte, Wechsel zu einer anderen Linie, ich habe alles bereit, jetzt ist nur eine Angelegenheit der Berechnungen

//four lines 
for (var i = 0; i < lines; i++) { 
//four columns 
    for (var j = 0; j < columns; j++) { 
    //if column is four 
    if (j === 4) { 
     //change line 
    //this.equipaments.lenght = 16 equipments 
     panel.putAndShowEquipment(i + 1, j, this.equipaments[i]); 
    } else { 
     panel.putAndShowEquipment(i, j, this.equipaments[i]); 
    } 
    } 
} 

Irgendwelche Vorschläge?

Answer 1

Angesichts Ihrer aktualisierten Frage scheint es, dass Sie einfach ein flaches Array in ein rechteckiges konvertieren müssen, indem Sie jedes Mitglied des flachen this.equipaments Array in den Konstruktor übergeben.

Wenn das der Fall ist, und da die Anzahl der lines * columns zum this.equipaments.length gleich sein wird, dann anstelle einer if Anweisung, alles, was Sie brauchen würde, ist der Index von i und j zu berechnen.

// lines * columns === this.equipaments.length 

for (var i = 0; i < lines; i++) { 
    for (var j = 0; j < columns; j++) { 
    panel.putAndShowEquipment(i + 1, j, this.equipaments[(i * columns) + j]); 
    } 
} 

Da es eine gleiche Anzahl von Spalten pro Linien ist, multiplizieren wir die aktuelle Zeilennummer durch die Gesamtzahl der Spalten und dann die aktuelle Spaltennummer hinzufügen.